在线图片转base64，出现跨域问题解决方案

最新推荐文章于 2024-08-01 15:24:39 发布

木头人@123

最新推荐文章于 2024-08-01 15:24:39 发布

阅读量3.1k

点赞数 5

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_41248093/article/details/115731791

版权

在实现在线图片转base64的过程中遇到了跨域问题，浏览器报错'Access-Control-Allow-Origin'缺失。尝试将图片绘制到canvas并转换，但只对部分图片有效。最终通过在图片URL末尾添加随机数如'?v=Math.random()'来解决缓存问题，成功避免了跨域限制。

摘要由CSDN通过智能技术生成

在线图片转base64，出现跨域问题解决方案

一定要仔细看完全文，或许可以帮到你。

功能需求：需要将在线图片进行转存。

遇到问题：在线图片有跨域问题，报如下错误

Access to image at ‘URL’ from origin ‘http://127.0.0.1’ has been
blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is
present on the requested resource.

接下来就解决这个问题

百度搜到的结果都是：
1、将img绘制成canvas，再将canvas转换成base64的img流；

// 吧src转换成base64
  getBase64(img_url: any) {
   
    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,