mui.previewimage.js图片放大的bug修改

测试人员提了个bug:图片只能放大一次,放大后,自动缩小且不能再放大。经过排查,问题发生原因是在预览图片时,mui.previewimage为图片设置了maxZoom属性,猜测为图片最大放大比例。我发现在计算这个属性的时候,得出的值为NaN。针对这个问题对mui.previewimage.js作如下修改

1、修改 proto._loadItem

proto._loadItem = function(index, isOpening) {
	...
	// 一些代码,这里不贴了
	...
	if (!itemData.loaded && imgEl.getAttribute('data-preview-lazyload')) {
		
	} else {
		itemData.lazyload && (imgEl.src = itemData.lazyload);
		/* 这里源代码直接调用_initZoom计算maxZoom,用到了imgEl的宽高,但是图片加载是异步的,有可能在取
		* 值时图片未加载完成,导致取到的 width 和 height 都是0, 这也是 maxZoom计算为 NaN 的原因,因			 
		* 此,这里将 _initZoom 放在图片加载完成的回调里,确保图片宽高取值正确
		*/
		let _this = this
		imgEl.onload = function() {
			_this._initZoom(itemEl, imgEl.width, imgEl.height);
		}
		imgEl.classList.add($.className('transitioning'));
		imgEl.addEventListener('webkitTransitionEnd', this._imgTransitionEnd.bind(this));
		imgEl.setAttribute('style', '');
		imgEl.offsetHeight;
	}
}

2、修改 proto._getScale。按理说修改完上面的代码后,to的 width 和 height 应该不会再出现为 0 的情况,但是为了保险起见,还是判断一下

proto._getScale = function(from, to) {
	var scaleX = to.width ? (from.width / to.width) : 1;
	var scaleY = to.height ? (from.height / to.height) : 1;
	var scale = 1;
	if (scaleX <= scaleY) {
		scale = to.height ? from.height / (to.height * scaleX) : 3;
	} else {
		scale = to.width ? from.width / (to.width * scaleY) : 3;
	}
	return scale;
	};

改完之后,图片可正常放大

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值