【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 = transformthis.$el.style.webkitTransform = transformthis._translateX = xthis._translateY = ythis._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里面的方法）

【uniapp】解决uni.previewImage图片模糊问题相关推荐

解决canvas导出图片模糊问题
// 解决导出图片模糊的方法toBeCanvas() {var copyDom = $("#canvasQR");var width = copyDom.offsetWidth; ...
uni-app 解决富文本图片溢出问题
解决前在js中获取后台的富文本数据后,使用 replace 设置图片的宽度为100% <template><view class="container"> ...
用uni.previewImage({}) 来直接做图片的预览和识别二维码
需求: 客户要求用户不用截图保存,通过直接用手机识别二维码关注,所以,这就需要我们进行图片的预览即可以解决. <image src="https://lr-huayoushi.oss- ...
uni-app插入本地背景图片不能超过40kb解决方法
uni-app插入本地背景图片不能超过40kb解决方法参考文章: (1)uni-app插入本地背景图片不能超过40kb解决方法 (2)https://www.cnblogs.com/gygg/p/1 ...
移动端高清适配方案（解决图片模糊问题、1px细线问题）
移动端高清适配方案(解决图片模糊问题.1px细线问题) 参考文章: (1)移动端高清适配方案(解决图片模糊问题.1px细线问题) (2)https://www.cnblogs.com/superliz ...
论文图片模糊问题的解决
最近用WPS写了本科毕业论文.感觉WPS确实可能比较low,以后可能写论文不会再用,不过还是把WPS插入图片的一些注意事项记录下来,也给其他写材料的人一些参考.(我想word 也应该同理) 在向文档中 ...
Html设置背景图模糊,CSS设置背景图片模糊内容不模糊的解决方法
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置, ...
CANVAS drawImage 绘图图片模糊已解决
CANVAS drawImage 绘图图片模糊解决不可以在CSS中定死canvas画布的长宽, 在绘图时给出canvas宽高具体JS代码: const canvas = document.getE ...
uni-app用uni.chooseImage API调用相机或从相册中选择图片
uni-app用uni.chooseImage API调用相机或从相册中选择图片 chooseImage: function() {var _this = this;uni.chooseImage({ ...

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

【uniapp】解决uni.previewImage图片模糊问题相关推荐

最新文章

热门文章