h5跨域访问图片_html5 canvas图片跨域解决办法

做项目前端用canvas处理图片碰到跨域问题，百度之，终于解决！

1、首先需要服务器设置返回允许跨域的头，以apache为例，可加在.htaccess或者apache配置文件中。

SetEnvIf Origin ":" IS_CORS

Header set Access-Control-Allow-Origin "*" env=IS_CORS

别忘了需要启用mod_setenvif和mod_headers扩展！

2、前端js需要这么写：var img = new Image,

canvas = document.createElement("canvas"),

ctx = canvas.getContext("2d"),

src = "http://example.com/image"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function() {

canvas.width = img.width;

canvas.height = img.height;

ctx.drawImage( img, 0, 0 );

localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );

}

img.src = src;

// make sure the load event fires for cached images too

if ( img.complete || img.complete === undefined ) {

img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

img.src = src;

}