解決微信插件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暫時沒有處理