canvas 图片跨域处理

[XXHolic]

引子

近期的工作中处理图片合并时，碰到图片来源跨域的情况，在此记录。

图片跨域处理

在用 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

:wastebasket:

开心的笑了。 ![24-poster][url-local-poster]