js图像转base64

1.使用canvas

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

function canvas2Base64(imgSrc) {
  let img = new Image();
  img.crossOrigin = "Anonymous"; // 执行一个跨域请求获取资源，但不可以携带cookie、证书或者 HTTP 基本验证信息
  img.onload = function () {
    const canvas = document.createElement("CANVAS");
    const ctx = canvas.getContext("2d");

    // 等同于img.width height
    canvas.height = this.naturalHeight;
    canvas.width = this.naturalWidth;

    ctx.drawImage(this, 0, 0);
    const dataURL = canvas.toDataURL();
    console.log("canvas:", dataURL);
  };
  img.src = imgSrc;
}
canvas2Base64(imgSrc);

2.使用FileReader

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

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

    <input type="file" onchange="fileReader2Base64(this)" />