canvas图片跨域问题

最近项目中出现canvas载入远程图片报错跨域问题”Access to Image at 'http://xxxxx/004.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.”

后台是PHP，网上搜了很多方法都讲的不是很仔细。

现总结解决办法如下：

1.html文件设置img.crossOrigin = 'anonymous';（注意此语句要在img.src之前）

2.服务器apache设置httpd.conf。首先确保mod_headers模块启用了，默认都是启用。然后假设图片的在htdocs文件夹下面，则在对应图片所在目录的directory标签下面增加 “Header set Access-Control-Allow-Origin "*" ，如下图

3.重启服务器，客户端html清除缓存重新载入页面。