Imagen con CORS habilitado

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

La especificación HTML introduce un atributo crossorigin para imágenes que, en conjunto con el encabezado  CORS apropiado, permite definir imágenes con el elemento <img> que se carguen de orígenes externos dentro de un lienzo (canvas) como si estas fuesen cargadas del origen actual.

See CORS settings attributes for details on how the crossorigin attribute is used. Test another edit with mdn_* task queues.

¿Qué es un "tainted" canvas? 

Aunque puedes usar imágenes sin la aprobación del CORS en el elemento canvas, hacerlo puede "manchar" el canvas. Por ejemplo, no puedes usar los métodos canvas toBlob()toDataURL(), or getImageData(). Si los usas se lanzará un mensaje de seguridad.

Esto protegerá a los usuarios de tener información privada usada por medio de imágenes que cogen información desde otras web sin permiso.

Ejemplo: Almacenando una imagen desde un origen externo

Debes de tener un servidor de hosting de imágenes con el apropiado Access-Control-Allow-Origin header. Añadiendo el atributo crossOrigin crea un request header.

You can use this excerpt from the HTML5 Boilerplate Apache server configs to appropriately respond with this response header:

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

Given that's all sorted, you will be able to save those images to DOM Storage 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"; // 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;
}

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 13 8 No support No support ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

See Also

Etiquetas y colaboradores del documento

 Colaboradores en esta página: antoiba86, vltamara
 Última actualización por: antoiba86,