likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 12

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

安装:

npm i preview-img-js

最简单实用:

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)