CORS Enabled Image

  • 版本网址缩略名: CORS_Enabled_Image
  • 版本标题: CORS Enabled Image
  • 版本 id: 33064
  • 创建于:
  • 创建者: ziyunfei
  • 是否是当前版本?
  • 评论 no changes

修订内容

HTML规范中介绍了一个Image对象的{{ htmlattrxref("crossorigin", "img") }}属性,结合合适的 CORS HTTP响应头, 就可以实现在canvas中使用外部域中的{{ HTMLElement("img") }}对象.

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

什么是"被污染"的canvas

Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob()toDataURL(), or getImageData() methods; doing so will throw a security error.

This protects users from having private data exposed by using images to pull information from remote web sites without permission.

Example: 本地存储一张外部域中的图片

Provided that you have a server hosting images along with appropriate Access-Control-Allow-Origin header, you will be able to save those images to {{ domxref("Storage","localStorage") }} as if they were served from your domain.

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // 外部域中的图片url
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;
// 在src图片已被缓存的情况下,确保load事件发生.
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

浏览器兼容性

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 13 8 {{ CompatNo() }} {{ CompatNo() }} {{ CompatNightly() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

相关链接

{{ languages({"en":"en/CORS_Enabled_Image","ja":"ja/CORS_Enabled_Image"}) }}

修订版来源

<p>HTML规范中介绍了一个Image对象的{{ htmlattrxref("crossorigin", "img") }}属性,结合合适的 CORS HTTP响应头, 就可以实现在canvas中使用外部域中的{{ HTMLElement("img") }}对象.</p>
<p>查看<a href="/zh-cn/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a>,来了解更多<code>crossorigin</code>属性的用法.</p>
<h2 id='什么是"被污染"的canvas'>什么是"被污染"的canvas</h2>
<p>Although you can use images without CORS approval in your canvas, doing so <strong>taints</strong> the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas <code>toBlob()</code>, <code>toDataURL()</code>, or <code>getImageData()</code> methods; doing so will throw a security error.</p>
<p>This protects users from having private data exposed by using images to pull information from remote web sites without permission.</p>
<h2 id="Example:_本地存储一张外部域中的图片">Example: 本地存储一张外部域中的图片</h2>
<p>Provided that you have a server hosting images along with appropriate <code>Access-Control-Allow-Origin</code> header, you will be able to save those images to {{ domxref("Storage","localStorage") }} as if they were served from your domain.</p>
<pre class="brush: js">var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // 外部域中的图片url
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;
// 在src图片已被缓存的情况下,确保load事件发生.
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}
</pre>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>13</td> <td>8</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNightly() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3 id="相关链接">相关链接</h3>
<ul> <li><a class="external" href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">Using Cross-domain images in WebGL and Chrome 13</a></li> <li><a class="external" href="http://whatwg.org/html#attr-img-crossorigin">HTML Specification - the <code>crossorigin</code> attribute</a></li>
</ul>
<p>{{ languages({"en":"en/CORS_Enabled_Image","ja":"ja/CORS_Enabled_Image"}) }}</p>
恢复到这个版本