静态资源转base64，解决图片跨域

最新推荐文章于 2024-05-08 14:59:37 发布

№~1

最新推荐文章于 2024-05-08 14:59:37 发布

阅读量437

点赞数

文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/weixin_45445453/article/details/126469154

版权

静态资源转base64，解决图片跨域

/**
 * 静态资源图片转base64
 * @param img_url{string}  url 
 * @param ratio{string}    压缩比率
 */
export function  getBase64(img_url,ratio=1) {
  function toBase64(image) {
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, image.width, image.height);
    const base64 = canvas.toDataURL('image/png',ratio);
    return base64;
  }

  return new Promise((resolve, reject) => {
    const image = new Image();
    image.setAttribute('crossOrigin', 'anonymous'); // 解决跨域
    image.crossOrigin = '*';  // 解决跨域
    image.src = img_url;
    image.onload = () => {
      resolve(toBase64(image));
    };
  });

}