context.getImageData() su localhost?

Question

Ho il seguente frammento di codice e sto cercando di farlo funzionare da localhost (OSX, in esecuzione XAMPP):

var canvas = document.getElementById('mycanvas'); 
    var cx = canvas.getContext('2d'); 

    var myImg = new Image(); 
    myImg.src = 'images/lion.jpg'; 

    $(myImg).load(function() { 
     cx.drawImage(myImg, 0, 0); 
     var imgData = cx.getImageData(0,0,150,150); 
    }); 

Ma quando l'eseguo ottengo questo errore dalla console:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. 
site.js:11Uncaught Error: SECURITY_ERR: DOM Exception 18 

Ho trovato alcune domande simili qui e so che questo ha qualcosa a che fare con il fatto che sto lavorando localmente e questo non accadrebbe se stavo cercando di accedere all'immagine dallo stesso dominio. Non so se questo ha senso, ma è quello che ho capito.

La mia domanda è: come posso farlo funzionare in un ambiente di sviluppo locale?

Answer 1

Fornisci il tuo html con un server HTTP, ad esempio Apache o Nginx.

Mac OSX viene fornito con installato Python, quindi si può semplicemente avviare un server HTTP con l'apertura di un terminale, quindi immettere:

cd /path/to/my/work/ 
python -m SimpleHTTPServer 

Poi aperto http://localhost:8000/ nel tuo browser. Questo dovrebbe funzionare.

Answer 2

Cercare un browser diverso può essere d'aiuto. Mi è successo su Chromium e, passando a Firefox, ho potuto continuare a eseguire il debug localmente.

Answer 3

ho finito per usare una combinazione di soluzioni (vedi this other problem)

Passi:

1. trasformare l'immagine a stringa base64.
2. Assegnarlo come src dell'oggetto Image js.
3. Draw su tela

Codice:

// helper to transform to base64 
// see other question for more help 
function toDataUrl(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.responseType = 'blob'; 
    xhr.onload = function() { 
    var reader = new FileReader(); 
    reader.onloadend = function() { 
     callback(reader.result); 
    }; 
    reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    xhr.send(); 
} 

var canvas  = document.querySelector("canvas"); 
var ctx   = canvas.getContext("2d"); 
var png   = new Image(); 
var backgroundSrc = "....."; 

png.onload = function() { 
    ctx.drawImage(png, 0, 0); 
}; 

toDataUrl(backgroundSrc, function(base64Img) { 
    png.src = base64Img; 
}); 

So che questa soluzione non è ottimale, ma ha funzionato per me e aiuta quando l'immagine non viene dalla stessa origine.

Sto postando questo per chiunque incontri lo stesso problema.