files/es/web/html/cors_enabled_image/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

---
title: Imagen con CORS habilitado
slug: Web/HTML/CORS_enabled_image
tags:
  - Avanzado
  - CORS
  - Canvas
  - HTML
  - Referencia
  - Seguridad
translation_of: Web/HTML/CORS_enabled_image
original_slug: Web/HTML/Imagen_con_CORS_habilitado
---
<p><span class="seoSummary">La especificación HTML introduce un atributo {{ htmlattrxref("crossorigin", "img") }} para imágenes que, en conjunto con el encabezado  {{Glossary("CORS")}} apropiado, permite definir imágenes con el elemento {{ HTMLElement("img") }} que se carguen de orígenes externos dentro de un lienzo (<em>canvas</em>) como si estas fuesen cargadas del origen actual.</span></p>

<p>Vea el artículo <a href="/en/HTML/CORS_settings_attributes" title="Atributos de configuración CORS">"Atributos de configuración CORS"</a> para mas detalles de como el atributo "crossorigin" es usado.</p>

<h2 id="¿Qué_es_un_tainted_canvas">¿Qué es un "tainted" canvas? </h2>

<p>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 <code>toBlob()</code>, <code>toDataURL()</code>, or <code>getImageData(). Si los usas se lanzará un mensaje de seguridad.</code></p>

<p>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.</p>

<h2 id="Ejemplo_Almacenando_una_imagen_desde_un_origen_externo">Ejemplo: Almacenando una imagen desde un origen externo</h2>

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

<p>Puedes utilizar este fragemto de la configuración del servidor Apache del Boilerplate HTML5 para responder apropiadamente con este encabezado de respuesta.</p>

<pre class="brush:xml">&lt;IfModule mod_setenvif.c&gt;
    &lt;IfModule mod_headers.c&gt;
        <span class="nt">&lt;FilesMatch</span> <span class="s">"\.(cur|gif|ico|jpe?g|png|svgz?|webp)$"</span><span class="nt">&gt;</span>
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        &lt;/FilesMatch&gt;
    &lt;/IfModule&gt;
&lt;/IfModule&gt;</pre>

<p>Dado que está todo ordenado, serás capás de guardar esas imagenes en el almacenamiento del DOM, así como si fueran solicitados de tu dominio.</p>

<pre class="brush: 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;
}</pre>


<h2 id="También_puede_ver">También puede ver</h2>

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