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

颜酱2023-09-07 9:57

最近需要使用预览图片的功能，改写一些库(我找不到原网址了，找到补上)，实现了纯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)