2018-04-28 13:23:40 1048浏览
当我们用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技术交流群：559883758。
【关注微信公众号获取更多学习资料】
全国免费咨询热线
邮箱：codingke@1000phone.com
官方群：148715490
15311698296
