解决微信插件wxparse图片大小不能改变的问题

1.问题:

　　最近在写小程序,需要使用html.使用了插件wxParse.这个插件一个弊端就是图片的大小不能自己在html中控制,只能按照原来图片存储的宽高进行显示.这样很困扰.

2.解决办法:

1.参考了 https://blog.csdn.net/tgy_csdn/article/details/81030487 这篇文章,但是这篇文章的代码是有问题的.所以进行了修改,

2.代码如下:

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

// 计算视觉优先的图片宽高
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(";");///sophie
    for(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(";");///sophie
      for (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;
 
}

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

2.将上面的代码替换掉原来的方法就可以了.

注意我只修改了px结尾的style.以%结尾的style暂时没有处理

解决微信插件wxparse图片大小不能改变的问题

猜你喜欢