HTML5 Canvas control de acceso-permitir-origen de error

Estoy recibiendo el siguiente error de JavaScript cuando trato de obtener datos de un elemento canvas:HTML5 Canvas control de acceso-permitir-origen de error

Error: canvas.toDataURL() not supported. [Exception... "The operation is insecure." code: "18" nsresult: "0x80530012 (SecurityError)"...

El lienzo se extrae de una imagen servidos desde un diferente dominio, pero estoy usando un proxy para agregar estas 2 líneas al encabezado de respuesta de la imagen:

access-control-allow-origin: *

access-control-allow-credentials: true

¿Qué me falta?

Gracias,
Ted

Fuente

2012-09-05 Ted Smith

Uhh exactamente cómo está usando su proxy. A menos que esté utilizando el servicio de mensajería iframe/back-end de dominios cruzados, va a fallar – Kpower

Estoy usando Charles (http://www.charlesproxy.com) en mi escritorio como un proxy para virar los encabezados de respuesta de imagen (agregando el acceso-control-permite-líneas de origen). Esto es solo para dev. Si funciona, voy a solicitar que los encabezados del servidor de imágenes se cambien para que se agreguen las líneas de acceso-control-permiso-origen.
Según tengo entendido, si el encabezado de respuesta de imagen tiene las líneas access-control-allow-origin, entonces mi javascript puede editar el lienzo. –

Finalmente lo encontré. La pieza que falta es establecer la propiedad crossOrigin de la imagen en "Anónimo". Más información aquí: https://developer.mozilla.org/en-US/docs/CORS_Enabled_Image –

Para realizar una solicitud CORS adecuada, debe establecer a "Anónimo" cross origin property de la imagen. This example es de Mozilla Developer Network.

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

El soporte del navegador excluye cualquier versión conocida de IE y versiones no publicadas de Safari. Firefox y Chrome tienen años de soporte.

Fuente

2013-08-02 02:19:07 FakeRainBrigand

HTML5 Canvas control de acceso-permitir-origen de error

Respuesta

Cuestiones relacionadas