解决canvas跨域，设置crossOriginal属性后报has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ head

最新推荐文章于 2024-09-08 21:18:06 发布

清风明月的博客

最新推荐文章于 2024-09-08 21:18:06 发布

阅读量2.5k

点赞数 2

分类专栏： Canvas画图文章标签：下载canvas图片 canvas画图可下载

本文链接：https://blog.csdn.net/xiaoxia188/article/details/107783663

版权

Canvas画图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、避免获取不到canvas元素，要使用$nextTick()，下载canvas画好的图片需要用toDataURL()将canvas对象转换为base64位编码，具体代码如下：

this.$nextTick(() => {
    let canvas = document.getElementById('myCanvas'); //获取canvas元素
    let ctx = canvas.getContext('2d');
    let imgUrl = new Image();
    imgUrl.src = url;   //图片的连接地址
    imgUrl.onload = () =>{ //必须要图片加载完成才能实现
        ctx.drawImage(imgUrl, 0, 0,130,130);
        let dataURL = canvas.toDataURL('image/png'); //将canvas对象转换为base64位编码
        console.log(dataURL);
    };
});

2、画的时候浏览器会报错Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
在这个这里插入图片描述
解决方法加：imgUrl.setAttribute(‘crossOrigin’, ‘anonymous’);

this.$nextTick(() => {
    let canvas = document.getElementById('myCanvas');  //获取canvas元素
    let ctx = canvas.getContext('2d');
    let imgUrl = new Image();
    imgUrl.setAttribute('crossOrigin', 'anonymous');  //设置图片可跨域
    imgUrl.src = url;   //图片的连接地址
    imgUrl.onload = () =>{ //必须要图片加载完成才能实现
        ctx.drawImage(imgUrl, 0, 0,130,130);
        let dataURL = canvas.toDataURL('image/png'); //将canvas对象转换为base64位编码
        console.log(dataURL);
    };
});

3、设置crossOriginal属性后报has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ head
在这里插入图片描述
解决方法：地址后面增加时间戳参数绕过缓存
imgUrl.src = url + ‘?tamp=’+(new Date()).valueOf();
最终代码如下：

this.$nextTick(() => {
    let canvas = document.getElementById('myCanvas');  //获取canvas元素
    let ctx = canvas.getContext('2d');
    let imgUrl = new Image();
    imgUrl.setAttribute('crossOrigin', 'anonymous');  //设置图片可跨域
    imgUrl.src = url+ '?tamp='+(new Date()).valueOf();   //图片的连接地址
    imgUrl.onload = () =>{ //必须要图片加载完成才能实现
        ctx.drawImage(imgUrl, 0, 0,130,130);
        let dataURL = canvas.toDataURL('image/png'); //将canvas对象转换为base64位编码
        console.log(dataURL);
    };
});

报错原因：已经设置了setAttribute属性，图片路径也设置了跨域，居然报跨域问题，尝试了多次找到问题原因：
通过Image对象加载图片的时候，浏览器监测发现之前缓存图片，对比与当前域名不一致认为当前是跨域访问，这时服务端设置允许跨域也会报错
所以需要在Image对象的src地址后面拼接一个时间戳