HTML5 Canvas access-control-allow-origine errore

sto ottenendo il seguente errore JavaScript quando si tenta di ottenere i dati da un elemento canvas:HTML5 Canvas access-control-allow-origine errore

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

La tela è disegnata da un'immagine servito da un diverso dominio, ma sto utilizzando un proxy per aggiungere queste 2 righe per l'intestazione della risposta immagine:

access-control-allow-origin: *

access-control-allow-credentials: true

che cosa mi manca?

Grazie,
Ted

fonte

2012-09-05 Ted Smith

Uhh, esattamente come si utilizza il proxy. A meno che tu non stia utilizzando il servizio di messaggistica/back-end iframe cross-domain, fallirà – Kpower

Sto usando Charles (http://www.charlesproxy.com) sul mio desktop come proxy per trafficare con le intestazioni di risposta alle immagini (aggiungendo il access-control-allow-origin lines). Questo è solo per dev. Se funziona, ho intenzione di richiedere che le intestazioni del server di immagini vengano modificate per aggiungere le righe di controllo dell'accesso-autorizzazione-autorizzazione.
La mia comprensione è che se l'intestazione della risposta dell'immagine ha le linee di controllo dell'accesso-consenso-autorizzazione, allora il mio javascript può modificare l'area di disegno. –

Alla fine l'ho trovato. Il pezzo mancante sta impostando la proprietà crossOrigin dell'immagine su "Anonimo". Ulteriori informazioni qui: https://developer.mozilla.org/en-US/docs/CORS_Enabled_Image –

Per effettuare una richiesta CORS corretta, è necessario impostare il cross origin property immagine di "Anonymous". This example proviene dalla rete di sviluppatori Mozilla.

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

Il supporto del browser esclude qualsiasi versione di IE noto, e le versioni inedite di Safari. Firefox e Chrome hanno anni di supporto.

fonte

2013-08-02 02:19:07 FakeRainBrigand

HTML5 Canvas access-control-allow-origine errore

risposta

Problemi correlati