JavaScript画出炫酷小游戏！Canvas绘图跨域问题揭秘

2024-04-04 技术资讯推广

当在canvas中绘制一张外链图片时，我们会遇到一个跨域问题。当在浏览器中打开这个页面时，你会发现这个问题：会抛出上面的安全错误这是一个苦恼的问题，但幸运的是img新增了crossorigin属性，这个属性决定了图片获取过程中是否开启COR

什么是Canvas？

别以为Canvas是HTML5才有的，利用JavaScript可以在网页上画出乱七八糟的图案和动画，甚至能整出小型游戏！想写点文字，画几条直线，拉几个矩形，画个圆圆圈圈什么的，还有把照片贴上去，网页立马变得炫酷无比，互动感爆棚！

Canvas绘图中的跨域问题

原来用Canvas作图也有点头疼！比如想把别的网来源的图片做进去，这就难缠了。问题就在于现在浏览器都会设置个防火墙（CORS策略）挡住你，让你无法直接抽取画布信息或进行操作。像常用的toBlob(), toDataURL(),还是 getImageData()这些方法统统不管用。看来开发起来还挺费劲儿的。

跨域问题的表现

有时候咱们在浏览器里想把网页上的某个超级链接小图添加到画板上，但是经常会出现这种情况。



    
    crossorigin


    <canvas width="600" height="300" id="canvas">
    
    
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var image = new Image();
        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';

警告！浏览器提醒你不能导出有问题的画布文件。

这个问题不大，我告诉你，我们由于跨域资源共享（CORS）方面的限制，没有办法把那些脏兮兮的画板数据弄出来。

解决方法：crossorigin属性

别慌，HTML5加了个新东西叫crossorigin属性。这个玩意儿帮我们解决了困扰已久的跨域问题。你只要把它设置为”anonymously”或”use-credentials”，就能使Canvas不受污损，也不用担心跨站资源分享问题！这样，就能随心所欲地使用各种资源！

实际操作示例

假设我们有一张外部链接的图片需要绘制到Canvas上：

javascript
我们轻松点儿开始，先找到一个叫'myCanvas'的东西，然后把它保存在一个变量里就行了，名字就叫做canvas。
我们用画布的2D图形工具ctx来画图。
var img = new Image();
记得别忘了给图加个"anonymous"，就这么简单，设个叫crossOrigin那个就行了。


    
    crossorigin


    
    
    
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var image = new Image();
        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';
    

img.onload = function(){

    ctx.drawImage(img,0,0);

}

把图片地址换成'https://example.com/image.jpg'就行了。

咱们先把上述代码中的 crossorigin 属性改设成”anonymous”，这样图片加载时就会开启 CORS 咯~接着就能安心地在Canvas画布上涂鸦，不再有麻烦的跨域障碍！
image.setAttribute('crossorigin', 'anonymous');

总结
看完这篇文章，搞定Canvas画图里的跨域问题，遇到问题轻松解决。记得设置crossorigin属性，别忘了代码中也要正确设置，这样程序才能顺利运行不出错！
			    						    						    						    					    		
			    					    				    					    			 原文链接：https://www.icz.com/technicalinformation/web/vue2/2024/04/13584.html，转载请注明出处~~~