前端将图片URL转换base64格式预览，解决canva绘制图片资源跨域问题

UpUp_seaboy

已于 2024-08-02 09:17:55 修改

阅读量646

点赞数 4

CC 4.0 BY-SA版权

分类专栏：开发记录文章标签：前端 javascript canva可画

于 2024-08-01 15:24:39 首次发布

本文链接：https://blog.youkuaiyun.com/Y_seaboy/article/details/140848647

开发记录专栏收录该内容

11 篇文章

订阅专栏

背景

1、后台返回的图片是华为云上的图片资源URL地址，前端放在el-image标签上，可以正常预览，但是后续对图片进行操作，通过canvas绘制新图片，会报跨域，导致绘制的新图片空白。
2、后台无法将响应头：access-control-allow-origin 改为 *

function convertImageUrlToBase64(url) {
  return fetch(url)
    .then(response => response.blob())
    .then(blob => new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result);
      reader.onerror = reject;
      reader.readAsDataURL(blob);
    }));
}

// 使用示例
const imageUrl = 'https://example.com/image.jpg';
convertImageUrlToBase64(imageUrl)
  .then(base64String => {
    console.log('Base64 image:', base64String);
    // 在页面上显示图片
    const imgElement = document.createElement('img');
    imgElement.src = base64String;
    document.body.appendChild(imgElement);
  })
  .catch(error => {
    console.error('Error converting image:', error);
  });