url(网络图片)转base64图片编码

原创已于 2022-02-22 09:30:26 修改 · 926 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-02-22 09:25:56 首次发布

js_demo 同时被 3 个专栏收录

22 篇文章

订阅专栏

移动端开发

16 篇文章

订阅专栏

笔记

5 篇文章

订阅专栏

这篇博客介绍了如何将网络图片转换为Base64编码，以便在跨域环境下进行图片处理。通过创建Canvas元素，加载图片到画布上，然后利用toDataURL方法获取Base64编码的图片数据，解决了因缓存导致的问题。文章着重强调了设置img对象的crossOrigin属性为'Anonymous'来允许跨域请求的重要性。

将网络图片转换为base64编码的图片做自定义处理

export function getBas64(url, outputFormat = 'image/jpg') {
  return new Promise((resolve) => {
    let canvas = document.createElement('CANVAS'),
      ctx = canvas.getContext('2d'),
      img = new Image,
      dataURL = null;
    img.crossOrigin = 'Anonymous'; // 重点！设置image对象可跨域请求
    img.onload = function () {
      canvas.height = img.height;
      canvas.width = img.width;
      ctx.drawImage(img, 0, 0);
      dataURL = canvas.toDataURL(outputFormat);
      canvas = null;
      resolve(dataURL);
    };
    img.src = url + '?t=' + new Date().valueOf() // 防止oss的缓存问题
  })
}