CORS enabled image

  • Revision slug: CORS_Enabled_Image
  • Revision title: CORS Enabled Image
  • Revision id: 33096
  • Created:
  • Creator: louisremi
  • Is current revision? No
  • Comment 34 words added, 34 words removed

Revision Content

The whatwg URLs specification introduces a {{ htmlattrxref("crossOrigin") }} attribute for images that, in combination with appropriate CORS header, allows {{ HTMLElement("Image") }}s loaded from foreign origins to be used in canvas as if they were being loaded from the current origin. For instance, this allows a page hosted on example.com to load images hosted on foreign.com in a canvas and use canvas.toDataURL() and context.getImageData() methods without throwing security errors.

<img src="http://foreign.com/logo.png" crossOrigin />


Possible values

Anonymous (default)
no credential are sent when requesting the ressource
Use-credentials
credentials (cookies, HTTP authentication, or client-side SSL certificates) are sent along the request

Example: Storing an image from a foreign origin

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 {{ localStorage }} as if they were served from your domain.

var img= new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "<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;
}

Revision Source

<p>The whatwg URLs specification introduces a {{ htmlattrxref("crossOrigin") }} attribute for images that, in combination with appropriate CORS header, allows {{ HTMLElement("Image") }}s loaded from foreign origins to be used in canvas as if they were being loaded from the current origin. For instance, this allows a page hosted on example.com to load images hosted on foreign.com in a canvas and use canvas.toDataURL() and context.getImageData() methods without throwing security errors.</p>
<pre>&lt;img src="http://foreign.com/logo.png" crossOrigin /&gt;
</pre>
<h3><br> Possible values</h3>
<dl> <dt>Anonymous (default)</dt> <dd>no credential are sent when requesting the ressource</dd> <dt>Use-credentials</dt> <dd>credentials (cookies, HTTP authentication, or client-side SSL certificates) are sent along the request</dd>
</dl>
<h3>Example: Storing an image from a foreign origin</h3>
<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 {{ localStorage }} as if they were served from your domain.</p>
<pre><span class="js-keyword">var img</span><span class="js-operator">= </span><span class="js-keyword">new </span><span class="js-variable">Image</span><span class="js-punctuation">,</span>
<span class="whitespace">    </span><span class="js-variable">canvas </span><span class="js-operator">= </span><span class="js-variable">document.createElement("canvas"),</span>
<span class="whitespace">    </span><span class="js-variable">ctx </span><span class="js-operator">= </span><span class="js-variable">canvas</span><span class="js-punctuation">.</span><span class="js-property">getContext</span><span class="js-punctuation">(</span><span class="js-string">"2d"</span><span class="js-punctuation">)</span><span class="js-punctuation">,</span>
<span class="whitespace">    </span><span class="js-variable">src </span><span class="js-operator">= </span><span class="js-string">"&lt;insert image url here&gt;"</span><span class="js-punctuation">;</span>

<span class="js-variable">img</span><span class="js-punctuation">.</span><span class="js-property">crossOrigin </span><span class="js-operator">= </span><span class="js-string">"Anonymous"</span><span class="js-punctuation">;</span>

<span class="js-variable">img</span><span class="js-punctuation">.</span><span class="js-property">onload </span><span class="js-operator">= </span><span class="js-keyword">function</span><span class="js-punctuation">(</span><span class="js-punctuation">) </span><span class="js-punctuation">{</span>
<span class="whitespace">    </span><span class="js-variable">canvas</span><span class="js-punctuation">.</span><span class="js-property">width </span><span class="js-operator">= </span><span class="js-variable">img</span><span class="js-punctuation">.</span><span class="js-property">width</span><span class="js-punctuation">;</span>
<span class="whitespace">    </span><span class="js-variable">canvas</span><span class="js-punctuation">.</span><span class="js-property">height </span><span class="js-operator">= i</span><span class="js-variable">mg</span><span class="js-punctuation">.</span><span class="js-property">height</span><span class="js-punctuation">;</span>
<span class="whitespace">    </span><span class="js-variable">ctx</span><span class="js-punctuation">.</span><span class="js-property">drawImage</span><span class="js-punctuation">( </span><span class="js-variable">img</span><span class="js-punctuation">, </span><span class="js-atom">0</span><span class="js-punctuation">, </span><span class="js-atom">0 </span><span class="js-punctuation">)</span><span class="js-punctuation">;</span>
<span class="whitespace">    localStorage.setItem( "savedImageData", </span><span class="js-variable">canvas</span><span class="js-punctuation">.</span><span class="js-property">toDataURL</span><span class="js-punctuation">(</span><span class="js-string">"image/png"</span><span class="js-punctuation">)</span><span class="js-punctuation"> );</span>
<span class="js-punctuation">}</span>
<span class="js-variable">img</span><span class="js-punctuation">.</span><span class="js-property">src </span><span class="js-operator">= </span><span class="js-variable">src</span><span class="js-punctuation">;</span>
// make sure the load event fires for cached images too
<span class="js-keyword">if </span><span class="js-punctuation">( </span><span class="js-variable">img</span><span class="js-punctuation">.</span><span class="js-property">complete </span><span class="js-operator">|| </span><span class="js-variable">img</span><span class="js-punctuation">.</span><span class="js-property">complete </span><span class="js-operator">=== </span><span class="js-atom">undefined </span><span class="js-punctuation">) </span><span class="js-punctuation">{</span>
<span class="whitespace">    </span><span class="js-variable">img</span><span class="js-punctuation">.</span><span class="js-property">src </span><span class="js-operator">= </span><span class="js-string">"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="</span><span class="js-punctuation">;</span>
<span class="whitespace">    </span><span class="js-variable">img</span><span class="js-punctuation">.</span><span class="js-property">src </span><span class="js-operator">= </span><span class="js-variable">src</span><span class="js-punctuation">;</span>
<span class="js-punctuation">}</span>
</pre>
Revert to this revision