Supporto di Canvas Canvas CORS per la manipolazione di immagini caricate su più domini

DOMANDA: Quali versioni del browser supportano le intestazioni CORS (Cross-Origin Resource Sharing) per le immagini Cross Domain utilizzate in Canvas?

CORS può applicare sia a XMLHttpRequests su più domini sia a richieste di immagini. Questa domanda riguarda le richieste di immagini La mia normale compatibilità con la versione del browser http://caniuse.com/cors non è chiara sul problema e la ricerca di google non produce risultati soddisfacenti.

Ho trovato un recente blog di sviluppo di Chrome che implicava che il supporto di CORS era molto diffuso nei browser moderni, ma potrebbe rompersi a causa di problemi di sicurezza di WebGL.
http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html

Maggiori dettagli su CORS:

Stiamo valutando la fattibilità dell’utilizzo di canvas e CORS con richieste di immagini tra domini come descritto nel Draft di lavoro del W3C http://www.w3.org/TR/cors/#use-cases . CORS è utilizzato da html canvas per consentire l’utilizzo di risorse cross-domain in modo simile al modo in cui flash utilizza crossdomain.xml. Fondamentalmente, vogliamo leggere / modificare i pixel dei dati dell’immagine e non vogliamo usare un server proxy di origine.

Normalmente, se le immagini vengono caricate su più domini e utilizzate con canvas html, l’accesso ai pixel usando funzioni come canvas.toDataURL () genera un errore di sicurezza. Tuttavia, se il server che consegna l’immagine aggiunge un’intestazione come questa, l’utilizzo del dominio incrociato dovrebbe essere consentito.

access-control-allow-origin: * 

Browser di cui ci preoccupiamo di più:

Stiamo pianificando di aggirare la mancanza di supporto della canvas di IE usando il flash, quindi per i browser desktop con un problema CORS possiamo farlo, ma su flash mobili non è un’opzione, e usare un proxy per rendere le richieste la stessa origine non è un’opzione nel nostro caso d’uso. Quindi, sono particolarmente interessato ad Andriod, Iphone, supporto browser IPAD per CORS.

Risultati dei test : cattive notizie, sembra funzionare solo in Chrome. Tutti gli altri browser (incluso Android Mobile) danno un errore come questo:

 Failed: DOM Exception: SECURITY_ERR (18) 

Dispositivi mobili Ho testato Android (samsung galaxy kernel versione 2.6.32.9), Iphone e IPAD V1 e non è riuscito in tutte e tre.

Puoi testare il tuo dispositivo mobile con questo URL: http://maplarge.com/CrossOriginImageTest.html

Lo script di test:

     Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support    

Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support

What is CORS Image Security?

Testing...


More Examples

Ho appena provato questo sul mio iPhone con iOS 6 sia in Safari che in Chrome e la tua pagina di test ha superato il test. Avrei postato questo come commento ma non mi è stata data la possibilità di pubblicare un commento per la tua risposta.

Puoi usare php per ottenere tutto ciò che vuoi senza CROS, nell’esempio di lavoro seguente:

   a('".$x."')"; ?>