解决微信小程序wxparse图片不能根据编辑器自定义大小

最近在做项目的时候用到了wxParse，这个插件比官方的 rich-text 组件要好用太多了，轻松解决小程序兼容HTML代码问题。

但使用wxParse插件有一个弊端，就是图片不能自定义大小，插件会自动解析图片原本的大小，这一点在小程序里显示就不友好了。因为小程序里使用px会特别大。

下面代码经过参考：https://www.cnblogs.com/sophie-fang/p/9993360.html 这篇文章做出的小改动。

改动优化：不设置 style 宽高，将自动适应图片原本的大小。（相当于兼容，设置、不设置 style 都将显示出来，而不会控制台报错）

代码如下：

打开 wxParse.js 文件

1、找到 calMoreImageInfo 方法（图片大小处理） 里面的 recal 变量替换为

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

2、将 wxAutoImageCal 方法替换成以下代码

function wxAutoImageCal(originalWidth, originalHeight, that, bindName, temImage) {
  var results = {};
  if ( !temImage.styleStr ) {
    // 没有设置 style
    var windowWidth = 0, windowHeight = 0;
    var autoWidth = 0, autoHeight = 0;
    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;
      // console.log("autoHeight" + autoHeight);
      results.imageWidth = autoWidth;
      results.imageheight = autoHeight;
    } else {//否则展示原来的数据
      results.imageWidth = originalWidth;
      results.imageheight = originalHeight;
    }
  } else {
    // 设置 style
    var arr = temImage.styleStr;
    var widthIndex = arr.indexOf("width:");

    var widthValue = '';
    if (widthIndex != -1) {
      // widthValue = arr[widthIndex + 1];

      var trr = arr.split(";"); //sophie
      for (let i = 0; i < trr.length; ++i) {
        if (trr[i].indexOf("width") != -1) {
          widthValue = trr[i].split(":")[1];
        }
      }
      // console.log(trr);
    }
    var percentageIndex = widthValue.search("%");
    var pixelIndex = widthValue.search("px");
    var percentageWidthValue = '';
    var pixelWidthValue = '';
    var pixelHeightValue = '';
    /**
     * 获取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];
        var hrr = arr.split(";");///sophie
        for (let i = 0; i < hrr.length; ++i) {
          if (hrr[i].indexOf("height") != -1) {
            heightValue = hrr[i].split(":")[1];
          }
        }
      }
      var pixelHeightIndex = heightValue.search("px");
      if ((pixelHeightIndex > 0) && (heightValue.length == pixelHeightIndex + 2)) {
        pixelHeightValue = heightValue.slice(0, -2);
      }
    }
    //获取图片的原始长宽
    var windowWidth = 0, windowHeight = 0;
    var autoWidth = 0, autoHeight = 0;
    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;

}

代码替换完，快去刷新试试吧！