vue-elementui 圖片上傳踩坑 前端轉base64 自動補齊白塊 固定像素

在開發項目的時候，有一個修改頭像的需求，但是在頁面中展示是沒問題的，可是在請求接口發送到后端的時候，像素一直固定為85*65

思考很久不知道哪里的原因，以為需要進行類似微信頭像剪裁之類的功能添加才可以

ps：我用的是upload組件，在上傳圖片時候改變方法中先取出來了文件流，然后用外部引入的js方法，將其轉為base64格式（注意this指向）

我在測試的時候將要傳遞給后端的這個base64進行圖片展示發現也是固定像素，后來發現是js方法中定義的固定寬高

發出來供大家參考 避免踩坑

change(file) {
      let a = "";
      this.file = file.raw;
      this.imageUrl = URL.createObjectURL(file.raw);
      this.photo=this.imageUrl
      getUrlBase642(this.imageUrl, "jpg/png", function(base64){
        a = base64;
      });
      setTimeout(() => {
        this.image64 = a;
      }, 1000);
    },

 

 

/**
 *文件流轉為base64（寬高固定85，85）
 * @param url 圖片路徑
 * @param ext 圖片格式
 * @param callback 結果回調
 */
export function getUrlBase642(url, ext, callback) {
  var canvas = document.createElement("canvas"); //創建canvas DOM元素
  var ctx = canvas.getContext("2d");
  var img = new Image;
  img.crossOrigin = 'Anonymous';
  img.src = url;
  img.onload = function () {
    canvas.height = 85; //指定畫板的高度,自定義
    canvas.width = 85; //指定畫板的寬度，自定義
    ctx.drawImage(img, 0, 0, 85, 85); //參數可自定義
    var dataURL = canvas.toDataURL("image/" + ext);
    callback.call(this, dataURL); //回掉函數獲取Base64編碼
    canvas = null;
  };
}


/**
 *文件流轉為base64（寬高固定60，85）
 * @param url 圖片路徑
 * @param ext 圖片格式
 * @param callback 結果回調
 */
export function getUrlBase64(url, ext, callback) {
  var canvas = document.createElement("canvas"); //創建canvas DOM元素
  var ctx = canvas.getContext("2d");
  var img = new Image;
  img.crossOrigin = 'Anonymous';
  img.src = url;
  img.onload = function () {
    canvas.height = 60; //指定畫板的高度,自定義
    canvas.width = 85; //指定畫板的寬度，自定義
    ctx.drawImage(img, 0, 0, 60, 85); //參數可自定義
    var dataURL = canvas.toDataURL("image/" + ext);
    callback.call(this, dataURL); //回掉函數獲取Base64編碼
    canvas = null;
  };
}