js将图片转为base64（解决Canvas.toDataURL 图片跨域问题）

原创已于 2022-03-14 18:59:27 修改 · 1.3w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2019-10-17 10:17:44 首次发布

js 同时被 2 个专栏收录

77 篇文章

订阅专栏

vue

62 篇文章

订阅专栏

本文介绍两种将图片资源转化为Base64编码的方法：一种是在项目中直接转换已有的图片资源，另一种是用户通过浏览器上传图片时实时进行转换。文章详细展示了如何使用JavaScript实现这些功能。

场景一：将项目中的图片资源转为base64

function convertImgToBase64(url, callback) {
        let canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        img = new Image();
        img.crossOrigin = 'anonymous';//解决Canvas.toDataURL 图片跨域问题
        img.onload = () => {
          canvas.height = img.height;
          canvas.width = img.width;
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 获取到图片的格式
          let dataURL = canvas.toDataURL("image/" + ext); // 得到base64 编码的 dataURL
          callback && callback(dataURL);
          canvas = null;
        };
        img.src = url;
      }

var  baseUrl = ''
convertImgToBase64(this.options.logo, (baseUrl) => {
    baseUrl = baseUrl
})

场景二：将用户本地上传的资源转化，即用户通过浏览器点击文件上传时，将图片资源转化成base64：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <style>

  </style>
</head>

<body>
  <p><input type="file" id="upfile"></p>
  <p><button id="upJS">用原生JS上传</button>
  </div>
  <script>
    function imgFileTobase64() {
      var reader = new FileReader();
      var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
      var file = document.getElementById('upfile').files[0]
      if (file) {
        //将文件以Data URL形式读入页面
        reader.readAsDataURL(file);
        reader.onload = function (e) {
          //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
          if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
            alert('上传失败，请上传不大于2M的图片！');
            return;
          } else {
            //执行上传操作
            alert(reader.result);
          }
        }
      }
    }
    document.getElementById("upJS").onclick = function () {
      imgFileTobase64()
    }

  </script>
</body>

</html>