微信小程序wxParse插件图片宽高自定义设置优化

微信小程序wxParse插件图片宽高自定义设置优化

描述：

        在使用wxParse（version 0.3）微信小程序插件过程中，当原文内容包含图片时，wxParse对图片的转换将通过wxml中image标签的bindload事件获取图片的存储本身的宽高尺寸，进而判断该宽度与屏幕（窗口）宽度的大小，将较小者设置为图片转换后的宽度，高度则根据该宽度按图片原宽高比例进行缩小或不变。

        这样的处理方式存在一个弊端，就是当原文图片设置了width、height等样式时，插件将会忽略该设置，只依据图片存储本身的宽高（如图1）来做设置。

（图1）

        那么如何将富文本中对图片所做的宽高设置通过wxParse转换到微信小程序中呢？本篇文章将介绍本人对该弊端的一个优化处理。

思路：

        插件对富文本的每一张图片的相关信息都记录到了一个 images 数组当中（该数组包含了图片的width、height等style信息）。在图片触发load事件时，在load的处理方法内将会调用图片尺寸自适应计算的方法，而在做自适应计算时，就可以根据当前图片load出的数据与该图片在images中的数组元素的数据进行处理。此时判断富文本原文是否有width、height设置，有的话就进入到新的宽高处理方式中计算百分比、固定像素等样式；无的话则按原插件逻辑对图片进行宽高计算。

使用前提：

        对于图片元素的style样式，这里有个局限性。样式属性的键和值之间需要有一个“空格”来分隔、不同样式属性之间需要有一个“空格”来分隔。
例如：style="width: 100px; height: 100px;"
        在html2json.js文件的第124行对style属性值进行了处理，用空格来把属性字符串分隔成数组。如果style属性值未按上述格式分隔开，将导致样式处理无法生效。
        在小程序使用wxParse的情景中，html元素数据大都由富文本编辑器生成。建议使用UEditor、summernote富文本编辑器，其生成的style样式将可以完美兼容此版本的功能优化。

具体实现：

wxParse.js文件的wxAutoImageCal方法为图片宽高定义的主方法，在wxAutoImageCal方法增加一个传参temImage，用于传递富文本原文img图片标签的数据，如style。wxAutoImageCal方法内部提取出temImage参数中附带的width、height等数据，再依据宽高值的类型（px还是%）去做判断，从而针对性设置符合需求的宽高。

// 计算视觉优先的图片宽高（对比原插件，加入了图片原文style的宽高设置，包含以%、px结尾的匹配设置）
function wxAutoImageCal(originalWidth, originalHeight,that,bind