关于前端:canvas-图片跨域处理

引子

近期的工作中解决图片合并时，碰到图片起源跨域的状况，在此记录。

• Origin
• My GitHub

图片跨域解决

在用 canvas 合成图片时，放在画布外面的图片，有些图片源是另外一个域名，因为同源策略，首先须要在服务配置中增加对应的 Access-Control-Allow-Origin，容许对应域名的申请。在这次处理过程中，还发现如果有用 CDN 进行减速，那么对应的 CDN 的配置也要增加这个申请头。

此外在合成图片的时候，要给对应的图片增加 crossOrigin 属性，否则会被认为净化了画布，无奈持续合成。具体可见文档阐明。

var img = new Image();
img.crossOrigin = "Anonymous";
img.src = '***';
img.onload = function() {}

最终合成图片的解决，要在图片加载实现的事件处理程序中才行，不然对应图片不会呈现在合成的图片中。

参考资料

• The canvas element
• Allowing cross-origin use of images and canvas