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

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

HTML5在线视频教程

​　　示例如下：

   

   crossorigin

   

   

   

       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';

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

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

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

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

   

crossorigin

   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';

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

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

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

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