一个基于vue的网页图片浏览插件

为什么会有这个组件

因为某天我在用电脑逛p站(pixiv)时，发现看图的效果不是那么令人满意，点开一个图片后居然不能放大，上移下移要通过鼠标滚轮，感觉有点反人类，我希望在网页看图时能全屏浏览图片，并且支持图片的放大缩小和拖拽，不知道是不是搜索关键字不对，逛了一圈发现莫得喜欢的轮子，刚好又有些思路而且闲着无聊，于是决定自己封装一个组件。最后的效果是这样的。好耶，2K曲面屏看纸片人老婆

截图半分钟，压图半小时

你也可以点这里在线查看效果（要用电脑端哦）

源码在这里，感谢这个项目让我想起了我的github账号（求一波star）

使用方法

注册

全局注册

1. npm install easy-preview -D
2. 在main.js中加入下面两句
    import EasyPreview from "easy-preview";
    Vue.use(EasyPreview);
3. 使用<EasyPreview>标签即可

局部注册

1. 使用npm install easy-preview -D安装插件
2. 在组件中注册EasyPreview
3. 使用<EasyPreview>标签即可

import EasyPreview from "easy-preview";
export default {
  name: 'app',
  components: {EasyPreview},
  data () {
    return {}
  }
}

使用

打开和隐藏的控制权交给组件内部

比较简单，只要传入一个img标签给插槽使用并传入img-src属性的值即可

<EasyPreview :img-src="imgSrc">
    <img :src="imgSrc" width="500" style="border-radius: 10px" alt="">
</EasyPreview>

控制权不交给组件的使用

这个时候要传入一个属性options，并将options.controlByUsers置为true，此时插槽会失效，需要传入一个额外的属性:show-preview控制显示和隐藏，此时点击右上角自带的关闭按钮改为触发自定义的clickCloseButton和click-close-button 事件（两个都会触发），你可以选择监听事件并修改传入的show-preview的值。

<img :src="imgSrc" alt="" width="500" style="border-radius: 10px" @click="onclick">
<EasyPreview :img-src="imgSrc" :options="options" :show-preview="showPreview"   @clickCloseButton="onClickCloseButton"></EasyPreview>


{
    methods : { 
        onclick() {
            this.showPreview = true
        }
        onClickCloseButton() {
            this.showPreview = false;
        }
    }
}

参数说明

提供的全部可传入参数

属性名	含义	默认值	备注
imgSrc	浏览时的图片链接	""
options	自定义选项	null	具体参数看下面
showPreview	是否展示预览图	false	仅控制权不是组件内部时生效
clickCloseButton	点击关闭按钮时会触发的自定义事件		仅控制权不是组件内部时生效 ，需要绑定回调函数
click-close-button	点击关闭按钮时会触发的自定义事件		仅控制权不是组件内部时生效 ，需要绑定回调函数

PS：clickCloseButton绑定的事件执行时会被传入一个函数，执行这个函数可以把图片恢复初始状态，调用时可以传入一个延迟执行的时间，这个时间默认是500ms（如果你没有修改transition的时间的话，最好不要修改它）

onClickCloseButton(reset) {
    this.showPreview = false;
    reset(500);
},

options的几个可选项

属性名	含义	默认值	备注
controlByUsers	控制权是否交给组件外部	false
showCloseButton	是否显示右上角的关闭按钮	true
showStatusExtraStyle	展示状态时额外的样式	""	可以传入对象或者字符串，样式优先级为内联级
hideStatusExtraStyle	隐藏状态时额外的样式	""	可以传入对象或者字符串，样式优先级为内联级
buttonExtraStyle	右上的按钮没有hover时的额外样式	""	可以传入对象或者字符串，样式优先级为内联级
buttonHoverExtraStyle	右上的按钮hover时的额外样式	""	可以传入对象或者字符串，样式优先级为内联级

实现思路

鼠标滚动缩放

鼠标滚动时先判断是上还是下，上是放大，下就是缩小，直接通过transform来放大缩小就行

放大时的处理

放大两次鼠标指着的位置（缩放中心transform-origin）不同，就要移动图片来保持放大后鼠标扔指着同个位置，就需要进行移动，移动的代码如下

this.magnification是现在的缩放倍数，this.prevOrigin.x 和 this.prevOrigin.y是上次的缩放中心

this.e 和 this.f 是图像水平和垂直方向的偏移量，对应transform: matrix(a, b, c, d, e, f) 的e和f

// 计算需要偏移的量
let moveX = (1 - this.magnification) * (originX - this.prevOrigin.x);
let moveY = (1 - this.magnification) * (originY - this.prevOrigin.y);
// 进行移动
this.e -= moveX;
this.f -= moveY;

当然也不是每次放大都会保证鼠标指着的位置不变，在图像视觉大小小于屏幕大小（准确来说是父容器大小，但是全屏时大小一致）时，要做到放大是两边同时等距放大，所以在代码里有下面的处理

// 如果图片的视觉大小小于wrapper的大小，就把transform-origin取到图片中央，强制等距放大
if (imgVisualHeight < wrapperHeight) {
    originY = imgHeight / 2;
}
if (imgVisualWidth < wrapperWidth) {
    originX = imgWidth / 2;
}

缩小时的处理

缩放倍率大于1.5

如果缩放倍率大于1.5，就尽可能保证缩小后鼠标扔指向相同的位置，但这并不是100%的，在缩放前要计算下次缩放后图片会不会出现图片比屏幕大，但是又有部分图片没有填充到图片的情况，代码如下

this.rate是放大或缩小一次的倍数，这里是1.05

// 如果现在的缩放倍率已经大于1.5
 if (this.magnification > 1.5) {
    // 计算让鼠标能指向同个位置的修正X和Y
    let moveX = (1 - this.magnification) * (originX - this.prevOrigin.x);
    let moveY = (1 - this.magnification) * (originY - this.prevOrigin.y);

    // 计算下次图片放缩后的位置
    const imgOffsetLeft = this.$refs.img.offsetLeft;
    const imgOffsetTop = this.$refs.img.offsetTop;
    const magnification = this.magnification / this.rate;
    const x = this.originX;
    const y = this.originY;
    const e = this.e - moveX;
    const f = this.f - moveY;
    const nextImgVisualWidth = imgWidth * magnification;
    const nextImgVisualHeight = imgHeight * magnification;
    // 图片的视觉左边 / 顶边 / 右边 / 底边离wrapper左边 / 顶边 / 右边 / 底边的距离
    const left = (magnification - 1) * x - e - imgOffsetLeft;
    const top = (magnification - 1) * y - imgOffsetTop - f;
    const right = nextImgVisualWidth - left - wrapperWidth;
    const bottom = nextImgVisualHeight - top - wrapperHeight;

计算出图片四边离容器四边的距离后，就开始处理有空白的情况，限于篇幅仅展示x轴方向的处理

// 如果缩放后的图片比wrapper的宽，同时图片左边没有顶到wrapper的左边
if (nextImgVisualWidth > wrapperWidth && left < 0) {
    // 让图片的左边能顶到wrapper的左边
    moveX -= left;
} else if (nextImgVisualWidth > wrapperWidth && right < 0) {
    // 让图片的左边能顶到wrapper的右边
    moveX += right;
}

还有另外一种情况，就是尽管缩放倍数大于1.5，但图片的宽或高的某一边仍然不能占据完屏幕，这个时候也要保证缩小后两边的间隙相同，处理在下面

// 如果图片的大小已经小于wrapper的大小
// 要让图片两边的空白相同
if (nextImgVisualWidth < wrapperWidth) {
    // 计算要移动多少才能让两边的空白相同
    let average = (left + right) / 2;
    let diff = left - average;
    // 移动过去
    moveX -= diff;
}
if (nextImgVisualHeight < wrapperHeight) {
    let average = (top + bottom) / 2;
    let diff = top - average;
    moveY -= diff;
}

计算完要偏移的量就可以偏移了

// 修正位置
this.e -= moveX;
this.f -= moveY;

缩放倍率小于1.5

这时开始逐渐恢复图片，即将e和f归0，但是不能一下子归0，所以我们用下面的公式计算这次移动的多少

// 本次移动距离 = 还需移动的长度 ÷ 还能移动的次数
let moveX = -this.e / this.optionCount;
let moveY = -this.f / this.optionCount;

这样会显得比较"循序渐进"，当然移动后可能出现上面说的，图片宽高大于屏幕宽高但该方向没占满屏幕，或者图片宽高小于屏幕宽高，移动后两边的间隙不同的情况，所以还是需要进行相同的处理，因为上面已经放过代码了，这里就不再说一次了。

鼠标拖动移动图片

估计不少人都做过拖拽移动吧，这里用的也是类似的原理，在mousedown中记录坐标，在mousemove中计算偏移，然后修改x和y方向的偏移，这里要说的就是一些边缘判断

在进行真正的移动前，要计算这么移动后会不会出现图片大于屏幕，但是又出现空白的情况，即，移动距离 = Math.min(图片的边缘屏幕边缘的距离, 鼠标离上一次位置的偏移量)，这样就可以保证不会越界，如果图片大小已经小于屏幕大小，就不能在对应方向上移动了。 代码如下

// 水平移动的方向
let hd = translateX > 0 ? "right" : "left";
// 垂直移动方向
let vd = translateY > 0 ? "down" : "up";

.... // 省略了计算这四个值的代码，因为我写代码时偷懒复制粘贴了
const left = (magnification - 1) * x - e - imgOffsetLeft;
const top = (magnification - 1) * y - imgOffsetTop - f;
const right = nextImgVisualWidth - left - wrapperWidth;
const bottom = nextImgVisualHeight - top - wrapperHeight;
// 判断图片能否向左 / 右 / 上 / 下 移动
// 判断的依据是往该方向移动后是否出现空隙
let leftAble = right > 0;
let rightAble = left > 0;
let upAble = bottom > 0;
let downAble = top > 0;

// 如果水平移动方向是左
if (hd === "left") {
    if (leftAble) {
        // 计算最多能偏移的大小, 超过这个大小会出现间隙
         translateX = -Math.min(Math.abs(translateX), right);
    } else {
        // 如果不能在这个方向上移动就把偏移量置为0
        translateX = 0;
    }
}
// 其他几个方向的处理同理
......

总体来说思路还是简单的，就是写的时候有点坑233

完整代码（带详细注释）点 这里

后记

为什么有这个后记呢，因为不写点啥就会显得结束地很突兀，所以就写这个后记来缓冲一下。 嗯嗯，那么下次见。