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;
  };
}