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