【uniapp】解决uni.previewImage图片模糊问题

​
问题简述：以前开发时也碰到查看大图就模糊的问题，查阅资料知道是css3的3d渲染导致图片模糊，但由于uni.previewImage是uniapp内置组件，不能修改，所以就一直放着在，今天做项目又用到了uni.previewImage，经过苦思冥想想到一个折中的办法来解决，那就是mixin，且只需两步就能解决，灰常nice!

解决步骤：

1、新建一个mixin.js, 复制下面代码到里面：

function v(a, b) {  
    return +((1000 * a - 1000 * b) / 1000).toFixed(1)  
}  
module.exports = {  
    created() {  
        if (this._setTransform) {  
            this._setTransform = (x, y, scale, source = '', r, o) => {  
                if (!(x !== null && x.toString() !== 'NaN' && typeof x === 'number')) {  
                    x = this._translateX || 0  
                }  
                if (!(y !== null && y.toString() !== 'NaN' && typeof y === 'number')) {  
                    y = this._translateY || 0  
                }  
                x = Number(x.toFixed(1))  
                y = Number(y.toFixed(1))  
                scale = Number(scale.toFixed(1))  
                if (!(this._translateX === x && this._translateY === y)) {  
                    if (!r) {  
                        this.$trigger('change', {}, {  
                            x: v(x, this._scaleOffset.x),  
                            y: v(y, this._scaleOffset.y),  
                            source: source  
                        })  
                    }  
                }  
                if (!this.scale) {  
                    scale = this._scale  
                }  
                scale = this._adjustScale(scale)  
                scale = +scale.toFixed(3)  
                if (o && scale !== this._scale) {  
                    this.$trigger('scale', {}, {  
                        x: x,  
                        y: y,  
                        scale: scale  
                    })  
                }  
                var transform = 'translateX(' + x + 'px) translateY(' + y + 'px) scale(' + scale + ')'  
                this.$el.style.transform = transform  
                this.$el.style.webkitTransform = transform  
                this._translateX = x  
                this._translateY = y  
                this._scale = scale  
            }  
        }  
    },  
    destroyed() {  
        //解决预览模式关闭后，和重复开关预览模式this._setTransform函数无限次执行导致手机卡顿的问题  
        if (this._FA) {  
            this._FA.cancel()  
        }  
        if (this._SFA) {  
            this._SFA.cancel()  
        }  
    },  
    methods: {  
    }  
}

2、在main.js里面导入你刚刚创建的mixin.js,并执行全局混入操作：

// main.js  
import Vue from 'vue';  
import App from './App';  

//...省略的代码  

import mixin from '@/mixin/mixin.js'  
Vue.mixin(mixin);  

//...省略的代码

完结，问题解决，O(∩_∩)O！

适用环境：已测试的环境：h5端没问题，其他端我没测试过，有空的小伙伴可以测试了回来反馈一下。

仍存在的问题：

         1、双指缩放完毕后图片仍然模糊，但只要单指轻微移动一下就会变成清晰的了；

         2、当图片未放大时，左右拖动图片接触边界回弹时会导致【this._setTransform】方法会被无限次执行，在下一次执行移动和缩放时才会停止，但不影响正常使用。（不清楚是不是官方代码的bug还是我修改后产生的bug，不过既然清晰度问题已经解决，就懒得管了）

         3、就算退出预览模式【this._setTransform】方法还是会在后台无限次执行，如果重复开关预览模式还会导致手机越来越卡；（不清楚这个问题是不是官方代码存在的问题，我暂时解决的方法是执行destroyed里面的方法）

​