HTML5 Canvas access-control-allow-pochodzenie błąd

Dostaję następujący błąd javascript, gdy próbuję uzyskać dane z elementu canvas:HTML5 Canvas access-control-allow-pochodzenie błąd

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

Płótno jest zasysane z obrazu służył z inną domeny, ale używam serwera proxy, aby dodać te 2 linie do nagłówka odpowiedzi image:

access-control-allow-origin: *

access-control-allow-credentials: true

Czego mi brakuje?

Dzięki,
Ted

Źródło

2012-09-05 Ted Smith

Co dokładnie używasz swojego serwera proxy. Jeśli nie korzystasz z usługi przesyłania wiadomości/backendu w wielu domenach, to nie uda się – Kpower

Używam Charlesa (http://www.charlesproxy.com) na moim pulpicie jako proxy do grania z nagłówkami odpowiedzi obrazu (dodając linie kontroli dostępu-zezwolenia-pochodzenia). To tylko dla deweloperów. Jeśli to zadziała, zamierzam poprosić o zmianę nagłówków serwerów obrazu, aby dodać linie zezwolenia na kontrolę dostępu.
Rozumiem, że jeśli nagłówek odpowiedzi na obraz ma linie kontroli dostępu, zezwalaj na początek, mój javascript może edytować płótno. –

W końcu to znalazłem. Brakujący element ustawia właściwość crossOrigin obrazu na "Anonimowy". Więcej informacji tutaj: https://developer.mozilla.org/en-US/docs/CORS_Enabled_Image –

Aby dokonać właściwego wniosku CORS, należy ustawić obraz w cross origin property do "anonimowy". This example pochodzi z 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; 
}

Obsługa przeglądarki wyklucza każdą znaną wersję IE i niewydane wersje Safari. Firefox i Chrome mają wieloletnie wsparcie.

Źródło

2013-08-02 02:19:07 FakeRainBrigand

HTML5 Canvas access-control-allow-pochodzenie błąd

Odpowiedz

Powiązane problemy