【uniapp】解决uni.previewImage图片模糊问题
解决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里面的方法)
更多推荐
已为社区贡献5条内容
所有评论(0)