html5 canvas图片跨域解决办法

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

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

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

别忘了需要启用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;
}

文章来源:https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image

  • 标签
  • 发表评论
当前用户:
  • 评论列表