这些小活动你都参加了吗?快来围观一下吧!>>
电子产品世界 » 论坛首页 » 综合技术 » 基础知识 » HTML5在线视频教程讲解canvas绘图时遇到的跨域问题

共3条 1/1 1 跳转至

HTML5在线视频教程讲解canvas绘图时遇到的跨域问题

菜鸟
2020-12-30 16:53:43     打赏

当我们用canvas绘图时常常会遇到一些跨域的问题,那么在遇到问题的时候我们应该如何解决呢?本篇文章小编就带读者们一块来看一下扣丁学堂HTML5在线视频教程讲解的canvas绘图时遇到的跨域问题以及解决方法,希望对HTML5感兴趣或者是正在参加HTML5培训学习的小伙伴有所帮助。

HTML5在线视频教程讲解canvas绘图时遇到的跨域问题

示例如下:


<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>crossorigin</title>

</head>

<body>

<canvaswidth="600"height="300"id="canvas"></canvas>

<imgid="image"alt="">

<script>

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

varimage=newImage();

image.onload=function(){

ctx.drawImage(image,0,0);

document.getElementById('image').src=canvas.toDataURL('image/png');

};

image.src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';

</script>

</body>


当在浏览器中打开这个页面时,你会发现这个问题:


UncaughtDOMException:Failedtoexecute'toDataURL'on'HTMLCanvasElement':Taintedcanvasesmaynotbeexported.


这是受限于CORS策略,会存在跨域问题,虽然可以使用图像,但是绘制到画布上会污染画布,一旦一个画布被污染,就无法提取画布的数据,比如无法使用画布toBlob(),toDataURL(),或getImageData()方法;当使用这些方法的时候会抛出上面的安全错误。


这是一个苦恼的问题,但幸运的是img新增了crossorigin属性,这个属性决定了图片获取过程中是否开启CORS功能:


<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>crossorigin</title>

</head>

<body>

<canvaswidth="600"height="300"id="canvas"></canvas>

<imgid="image"alt="">

<script>

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

varimage=newImage();

image.setAttribute('crossorigin','anonymous');

image.onload=function(){

ctx.drawImage(image,0,0);

document.getElementById('image').src=canvas.toDataURL('image/png');

};

image.src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';

</script>

</body>


对比上面两段JS代码,你会发现多了这一行:


image.setAttribute('crossorigin','anonymous');


就是这么简单,完美的解决了。

以上就是扣丁学堂HTML5在线视频教程讲解的canvas绘图时遇到的跨域问题以及解决方法,同学们看懂了吗?想要了解更多HTML5开发内容的小伙伴可以登录扣丁学堂官网查询。扣丁学堂HTML5在线学习在行业内有着良好的口碑,除了有专业的老师和与时俱进的课程体系之外,还有大量的HTML5基础教程供学员观看学习。扣丁学堂H5技术交流群:692172929。微信号:codingbb



工程师
2020-12-30 22:06:40     打赏
2楼

这个问题还是蛮大的


工程师
2020-12-30 22:36:27     打赏
3楼

感谢分享


共3条 1/1 1 跳转至

回复

匿名不能发帖!请先 [ 登陆 注册 ]