小程序---wxParse解决图片大小不适应小程序页面问题

有时候使用wxParse渲染html的图文信息时，图片会按照原图的大小显示，在小程序页面就容易出现滚动条，这样页面一点都不美观。

解决办法：

进入wxParse.js文件:

一、

var recal = wxAutoImageCal(e.detail.width, e.detail.height,that,bindName);

改为：

var recal = wxAutoImageCal(e.detail.width, e.detail.height, that, bindName, temImages[idx]);

二、将wxAutoImageCal方法替换为如下代码：

//计算视觉优先的图片宽高
function wxAutoImageCal(originalWidth, originalHeight, that, bindName, temImage) {var arr = temImage.attr.style;var widthIndex = arr.indexOf("width:");console.log(widthIndex);var widthValue = '';if (widthIndex != -1) {// widthValue = arr[widthIndex + 1];console.log(arr);var trr = arr.split(";");///sophiefor (let i = 0; i < trr.length; ++i) {if (trr[i].indexOf("width") != -1) {widthValue = trr[i].split(":")[1];}}// console.log(trr);console.log(widthValue);}var percentageIndex = widthValue.search("%");var pixelIndex = widthValue.search("px");var percentageWidthValue = '';var pixelWidthValue = '';var pixelHeightValue = '';console.log(percentageIndex);console.log(pixelIndex);/*** 获取width的百分比数值* 因为widthValue是带有%和;的，例如宽度为50%，那么widthValue的数据格式为widthValue == "50%;"，* 因此多出来后面两个字符'%;'，所以要去除后面两位*/if ((percentageIndex > 0) && (widthValue.length == percentageIndex + 2)) {percentageWidthValue = widthValue.slice(0, -2);}/*** 获取width的px数值* 因为widthValue是带有px和;的，例如宽度为50px，那么widthValue的数据格式为widthValue == "50px;"，* 因此多出来后面三个字符'px;'，所以要去除后面三位，* 而当width为px显示时，height和width是成对出现的*/if ((pixelIndex > 0) && (widthValue.length == pixelIndex + 2)) {pixelWidthValue = widthValue.slice(0, -2);var heightIndex = arr.indexOf("height:");var heightValue = '';if (heightIndex != -1) {// heightValue = arr[heightIndex + 1];console.log(arr);var hrr = arr.split(";");///sophiefor (let i = 0; i < hrr.length; ++i) {if (hrr[i].indexOf("height") != -1) {heightValue = hrr[i].split(":")[1];}}console.log(heightValue);}var pixelHeightIndex = heightValue.search("px");if ((pixelHeightIndex > 0) && (heightValue.length == pixelHeightIndex + 2)) {pixelHeightValue = heightValue.slice(0, -2);}}console.log(pixelHeightValue);//获取图片的原始长宽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;/*** 1、如果图片的宽度style是百分比的参数形式，那么图片在微信中展示的宽度就定义为 手机屏幕宽度*宽度百分比；* 2、如果图片的宽度style是px的参数形式，并且该宽度小于屏幕宽度，那么图片在微信中展示的宽、高就定义为 style所设置的宽、高；* 3、此外，则按原插件逻辑进行图片大小定义，在图片width大于手机屏幕width时等比例缩放至屏幕大小，*   未大于手机屏幕width时则按图片原尺寸显示*/if (percentageWidthValue) {autoWidth = (windowWidth * percentageWidthValue) / 100;autoHeight = (autoWidth * originalHeight) / originalWidth;results.imageWidth = autoWidth;results.imageheight = autoHeight;} else if (pixelWidthValue && pixelHeightValue && (pixelWidthValue <= windowWidth)) {results.imageWidth = pixelWidthValue;results.imageheight = pixelHeightValue;} else {//判断按照那种方式进行缩放// console.log("windowWidth" + windowWidth);if (originalWidth > windowWidth) {//在图片width大于手机屏幕width时候autoWidth = windowWidth;// console.log("autoWidth" + autoWidth);autoHeight = (autoWidth * originalHeight) / originalWidth;// console.log("autoHeight" + autoHeight);results.imageWidth = autoWidth;results.imageheight = autoHeight;} else {//否则展示原来的数据results.imageWidth = originalWidth;results.imageheight = originalHeight;}}return results;}

小程序---wxParse解决图片大小不适应小程序页面问题相关推荐

微信小程序动态计算图片大小
微信小程序动态计算图片大小方法一使用图片的mode属性手动计算给图片绑定事件bind:load,回调函数名为onImgLoad 编写回调函数,width为340是图片容器的宽度 method ...
微信小程序自动解决分包大小问题_2020微信小程序前端面试题汇总
[持续更新,欢迎补充] 1.文件类型 WXML--模板文件 JSON--配置/设置文件,如标题,tabbar,页面注册 WXSS--样式文件,样式可直接用import导入 JS--脚本逻辑文件,逻辑处 ...
php 限制图片大小代码,微信小程序在上传图片时如何限制大小（附代码）
本篇文章给大家带来的内容是关于微信小程序在上传图片时如何限制大小(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 最近有一个微信小程序的项目,要求是上传多张图片,数量不能超过 ...
微信小程序自动解决分包大小问题_微信小程序分包加载设置
设置分包加载微信小程序分包限制为: 主包或者单个分包最大为2M 整体小程序所有包最大为8M 为什么需要设置分包? 小程序项目中,有多种角色(公共页面很少),设置分包加载方便管理整个小程序压缩后代码 ...
微信小程序自动解决分包大小问题_一个小小的优化，能让你的小程序瘦身10%...
我司一直专注于微信小程序(以下简称小程序)开发,可以说是重仓押注在小程序上.但由于小程序的大小有严格的限制(单个分包/主包大小不能超过2M).而我们的业务又相对比较复杂,因此常常会突破小程序的大小限制 ...
微信小程序tabBar改变图片大小方法
1.最少用,但是最简单,用原生tabBar用ps改变图片大小 2.用原生提供的custom-tab-bar(可能会存在一些小问题,比如switchTab的跳转之类的) 3.自定义组件,把所有页面变成子 ...
Java处理图片后图片变小了_JAVA改变图片大小,该怎么处理
JAVA改变图片大小我实现了改变图片大小,但是分辨率有很大的影响,求教JAVA中的类或者算法解决这个问题,使之可以改变图片大小,同时不影响图片质量 java 图片算法类分享到: ------解 ...
阿里云ECS遭挖矿程序攻击解决方法（彻底清除挖矿程序，顺便下载了挖矿程序的脚本）
一:杀死挖矿程序进程在服务器上使用top指令查看cpu的使用情况,发现有一个叫java的程序占用cpu高达99.9% PID USER PR NI VIRT RES SHR S %CPU %MEM ...
微信小程序自动解决分包大小问题_微信小程序-分包 -每包2M
限制在2M以内.如果超过2M,可以通过分包加载实现,在app.json中配置即可, 小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. 在构建小程序分包项目时,构建会输出一个 ...

小程序---wxParse解决图片大小不适应小程序页面问题

解决办法：

小程序---wxParse解决图片大小不适应小程序页面问题相关推荐

最新文章

热门文章