js图片的几种转换

• 图片地址转base64的两种方法
  1.使用canvas
  将图像绘制到大小同样的canvas上（大小不同转出来的会带有空白部分），然后使用canvas.toDataURL得到base64的字符串

/**
 * 将图片的url路径转为base64路径
 * 可以用await等待Promise的异步返回
 * @param {Object} imgUrl 图片路径
 */
export function getBase64Sync(imgUrl) {
  return new Promise(function (resolve, reject) {
    // 一定要设置为let，不然图片不显示
    let image = new Image();
    //图片地址
    image.src = imgUrl;
    // 解决跨域问题
    image.setAttribute("crossOrigin", "*"); // 支持跨域图片
    // image.onload为异步加载
    image.onload = function () {
      let canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      let context = canvas.getContext("2d");
      context.drawImage(image, 0, 0, image.width, image.height);
      //图片后缀名
      let ext = image.src
        .substring(image.src.lastIndexOf(".") + 1)
        .toLowerCase();
      //图片质量
      let quality = 0.8;
      //转成base64
      let dataurl = canvas.toDataURL("image/" + ext, quality);
      //返回
      resolve(dataurl);
   
    // return dataurl
    };
  });
}

2.使用FileReader
适用于上传图片，然后将图片的base64发送给后端的情况

window.onload = function () {
            // 获取文件dom
            var input = document.getElementById("fielinput");
            // 判断该浏览器是否支持FileReader
            if (typeof (FileReader) === 'undefined') {
                console.log("你的浏览器不支持 FileReader");
                input.setAttribute('disabled', 'disabled');
            } else {
                // 为file添加事件监听
                input.addEventListener('change', parseFileToBase64, false);
            }
  		}
function fileReader2Base64(el) {
  const file = el.files[0];
  const reader = new FileReader();
  reader.onloadend = function () {
    console.log("FileReader:", reader.result);
  };
 
  // readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE
  // 并触发 loadend (en-US) 事件，同时 result 属性将包含一个data:URL 格式的字符串（base64 编码）以表示所读取文件的内容。
  reader.readAsDataURL(file);
}

• base64图片地址转为二进制文件流

 /**
     * @description: 将base64图片地址转为二进制文件流
     * @param {*} dataurl    文件地址
     * @param {*} filename    文件名
     * @return {*}
     */
   export base64toFile(dataurl, filename = "file") {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let suffix = mime.split("/")[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      let file = new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
      const formData = new FormData();
      formData.append("file", file);
    },