图片预览插件,纯js编写,适合任意框架

最近需要使用预览图片的功能,改写一些库(我找不到原网址了,找到补上),实现了纯js的预览,脱离框架,方便跨平台使用。

安装:

js 复制代码
npm i preview-img-js

最简单实用:

shell 复制代码
import {preivew-img} from 'preview-img-js';
previewImg('https://blog-huahua.oss-cn-beijing.aliyuncs.com/blog/code/typora-user-images/image-20221016081802807.png')
// 也可以是img元素,previewImg(img元素)

效果图如下:

更多参数设置

js 复制代码
options = {
  isListenWheel: false, // 是否监听滚轮事件,默认不监听
  startZoom: 1, // 缩放比例,默认值为1,表示不缩放
  isClickShadeClose: true, // 是否点击遮罩层关闭,默认为true
  colorMask: 'rgba(0,0,0,.7)', // 遮罩层的颜色,默认为rgba(0,0,0,.7)
  hasCloseBox: true, // 是否有关闭按钮,默认为true
  hasActionBox: true, // 是否有操作按钮,默认为true
  hasAnimateWhenIsImgEl: false, // 当传入值是el是否有动画,默认为false
  afterCloseCallback: null, // 关闭之后的回调
  afterScaleCallback: null, // 改变尺寸之后的回调
}
previewImg(url,options)
相关推荐
阳火锅1 分钟前
在生产环境下,你真的有考虑到使用数组方法的健壮性吗?
前端·javascript·面试
孤月葬花魂12 分钟前
JavaScript 中的 Promise API 全面解析
前端·javascript
几道之旅13 分钟前
Electron 应用打包全指南
前端·javascript·electron
shushushu17 分钟前
Web如何自动播放音视频
前端·javascript
帅夫帅夫22 分钟前
前端存储入门:Cookie 与用户登录状态管理
前端·架构
陈随易25 分钟前
程序员的新玩具,MoonBit(月兔)编程语言科普
前端·后端·程序员
傻球28 分钟前
前端实现文本描边
前端·canvas
snakeshe101029 分钟前
1. 实现 useEffect
前端
前端进阶者32 分钟前
天地图InfoWindow插入React自定义组件
前端·javascript
扶我起来还能学_34 分钟前
uniapp Android&iOS 定位权限检查
android·javascript·ios·前端框架·uni-app