在开发 WordPress 版微信小程序的过程中发现文章图片如果宽度大于屏幕的宽度,图片是以原尺寸显示的,就会充满屏幕,而不不是缩放显示。在 wxParse 的解析中明明有图片尺寸的自动解析,但并没有起作用。经过一段时间的摸索,总算是找到原因了,在这里记录一下。
先看一下原来不正常的显示:

再看看 wxParse 中自动解析图片尺寸的部分代码:
/**
* 图片视觉宽高计算函数区
**/
function wxParseImgLoad(e) {
var that = this;
var tagFrom = e.target.dataset.from;
var idx = e.target.dataset.idx;
if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
calMoreImageInfo(e, idx, that, tagFrom)
}
}
/* 假循环获取计算图片视觉最佳宽高*/
function calMoreImageInfo(e, idx, that, bindName) {
var temData = that.data[bindName];
if (!temData || temData.images.length == 0) {
return;
}
var temImages = temData.images;
/*因为无法获取view宽度 需要自定义padding进行计算,稍后处理*/
var recal = wxAutoImageCal(e.detail.width, e.detail.height,that,bindName);
var index = temImages[idx].index
var key = `${bindName}`
for (var i of index.split('.')) key+=`.nodes[${i}]`
var keyW = key + '.width'
var keyH = key + '.height'
that.setData({
[keyW]: recal.imageWidth,
[keyH]: recal.imageheight,
})
}
/* 计算视觉优先的图片宽高*/
function wxAutoImageCal(originalWidth, originalHeight,that,bindName) {
/*获取图片的原始长宽*/
var windowWidth = 0, windowHeight = 0;
var autoWidth = 0, autoHeight = 0;
var results = {};
var padding = that.data[bindName].view.imagePadding;
windowWidth = realWindowWidth-2*padding;
windowHeight = realWindowHeight;
/*判断按照那种方式进行缩放*/
/*console.log("windowWidth" + windowWidth);*/
if (originalWidth > windowWidth) {/*在图片width大于手机屏幕width时候*/
autoWidth = windowWidth;
/* console.log("autoWidth" + autoWidth);*/
/*autoHeight = (autoWidth * originalHeight) / originalWidth;*/
autoHeight = ( autoWidth / originalWidth) * originalHeight;
/* console.log("autoHeight" + autoHeight);*/
results.imageWidth = autoWidth;
results.imageheight = autoHeight;
} else {/*否则展示原来的数据*/
results.imageWidth = originalWidth;
results.imageheight = originalHeight;
}
return results;
}
可以看到当图片宽度大于屏幕的宽度时,会将图片的宽度设置为屏幕宽度,然后自动设置长度。然而,这段代码好像并没有起作用。为了找到原因,我又看了看解析出来的图片元素:

明显的能看到在“img”标签上一层还有一个“wp-caption”类的东东。直觉告诉我就是这个东东在搞怪,可是这个东西是从哪来的呢?我又看了小程序获得的文章内容响应,发现了这个:
<figure id=\"attachment_1030\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.sunriseydy.top\/wp-content\/uploads\/2018\/05\/preview-1-1.jpg\"><img class=\"size-full wp-image-1030\" src=\"https:\/\/cdn.sunriseydy.top\/wp-content\/uploads\/2018\/05\/preview-1-1.jpg\" alt=\"\u7535\u8111\u7248\u9884\u89c8\u56fe\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/blog.sunriseydy.top\/wp-content\/uploads\/2018\/05\/preview-1-1.jpg 1920w, https:\/\/blog.sunriseydy.top\/wp-content\/uploads\/2018\/05\/preview-1-1-768x432.jpg 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><figcaption class=\"wp-caption-text\">\u7535\u8111\u7248\u9884\u89c8\u56fe<\/figcaption><\/figure>
可以看到正是这个“figure”标签中设置了“width”,每个“img”标签都在这个“figure”标签下,那把它删掉呗。怎么删呢?还是用上次的“replace”大法吧。在获取到文章内容的响应后,把这个“figure”标签替换为“”。修改 detail.js 中的代码,如下:
res = response;
WxParse.wxParse('article', 'html', response.data.content.rendered.replace(/<figure[^>]*class=\"wp-caption[^>]*>/g, "").replace(/<\/figure>/g, ""), self, 5);
我们来看看修改后的图片显示:

哈哈,缩放显示成功!
版权说明:
本作品由 sunriseydy 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
文章内容如未说明均为原创,欢迎转载,但请注明原作者(sunriseydy)和原文链接(https://blog.sunriseydy.top/technology/wordpress/wordpress-wxminiapp-img-too-large/)
部分来自互联网的文章,如有侵权,请联系我,24小时内删除,谢谢
本作品由 sunriseydy 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
文章内容如未说明均为原创,欢迎转载,但请注明原作者(sunriseydy)和原文链接(https://blog.sunriseydy.top/technology/wordpress/wordpress-wxminiapp-img-too-large/)
部分来自互联网的文章,如有侵权,请联系我,24小时内删除,谢谢
手机打开扫一扫即可访问本页面
感谢您的支持,SunriseYDY 会继续努力的!

扫码打赏,你说多少就多少


打开支付宝扫一扫,即可进行扫码打赏哦
日出一点一 | 在探索的路上永不止步