测试人员提了个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;
};
改完之后,图片可正常放大