mozilla
您的搜索结果

    启用了 CORS 的图片

    HTML 规范中图片有一个 crossorigin 属性,结合合适的 CORS HTTP 响应头,就可以实现在画布中使用跨域 <img> 元素的图像。

    查看 CORS settings attributes 来了解更多 crossorigin 属性的用法。

    什么是“被污染”的 canvas?

    尽管不通过 CORS 就可以在画布中使用图片,但是这会污染画布。一旦画布被污染,你就无法读取其数据。例如,你不能再使用画布的 toBlob()toDataURL() 或 getImageData() 方法,调用它们会抛出安全错误。

    这种机制可以避免未经许可拉取远程网站信息而导致的用户隐私泄露。

    示例: 存储一张外部域中的图片

    你必须有一个可以对图片响应正确 Access-Control-Allow-Origin 响应头的服务器。你可以使用以下片段 (来自 HTML5 Boilerplate Apache server configs) 实现正确响应头。

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

    配置完毕后,你就可以将这些图片保存到 DOM 存储 中了,就像这些图片在你自己域名之下一样。

    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;
    }

    浏览器兼容性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 13 8 Not supported Not supported Nightly build
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

    另请参阅

    文档标签和贡献者

    此页面的贡献者有: ziyunfei, Breezewish
    最后编辑者: Breezewish,