问题简述:以前开发时也碰到查看大图就模糊的问题,查阅资料知道是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里面的方法)

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐