L'operazione context.getImageData() non è sicura

Question

Desidero realizzare un semplice filtro in scala di grigi per la tela HTML5, ma non riesco a catturare i dati dell'immagine come pixel. Ricevo avvisi di sicurezza da FF e Chrome. Finalmente il filtro non rende l'immagine grigia.

JS FIDLE CODE

JS:

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

var image = new Image(); 
image.onload = function() { 
    if (image.width != canvas.width) 
    canvas.width = image.width; 
    if (image.height != canvas.height) 
    canvas.height = image.height; 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.drawImage(image, 0, 0, canvas.width, canvas.height); 
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 
    filter(imageData); 
    context.putImageData(imageData, 0, 0); 
} 
image.src = "http://i0.gmx.net/images/302/17520302,pd=2,h=192,mxh=600,mxw=800,w=300.jpg"; 

function filter(imageData){ 
var d = imageData.data; 
    for (var i = 0; i < d.length; i += 4) { 
    var r = d[i]; 
    var g = d[i + 1]; 
    var b = d[i + 2]; 
    d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3; 
    } 
return imageData; 
} 

Answer 1

Questa è una caratteristica di sicurezza. Da W3:

Il metodo getImageData(sx, sy, sw, sh) deve, se la bandiera origine pulire dell'elemento canvas è impostato su false, gettare un SecurityError un'eccezione

Questo per evitare che i proprietari dei siti maligni di caricare le immagini potenzialmente private che il browser dell'utente ha accesso alla tela, quindi invia i dati ai propri server. L'origine da pulire può essere spento se:

• metodo drawImage del contesto 2D dell'elemento() viene richiamata con un HTMLImageElement o un HTMLVideoElement cui origine non è la stessa come quella dell'oggetto Document che possiede l'elemento canvas.

• Il metodo drawImage() del contesto 2D viene chiamato con un HTMLCanvasElement il cui flag di origine-clean è falso.

• attributo fillStyle del contesto 2D dell'elemento viene impostata su un oggetto CanvasPattern creato da un HTMLImageElement o un HTMLVideoElement cui origine non era la stessa come quella del Oggetto Document che possiede l'elemento di tela in cui il modello è stato creato .

• L'attributo fillStyle del contesto 2D dell'elemento è impostato su un oggetto CanvasPattern creato da un HTMLCanvasElement il cui flag origine-pulito era falso al momento della creazione del motivo.

• attributo strokeStyle del contesto 2D dell'elemento viene impostata su un oggetto CanvasPattern creato da un HTMLImageElement o un HTMLVideoElement cui origine non era la stessa come quella del Oggetto Document che possiede l'elemento di tela in cui il modello è stato creato .

• L'attributo strokeStyle del contesto 2D dell'elemento è impostato su un oggetto CanvasPattern creato da un HTMLCanvasElement il cui flag origine-pulito era falso al momento della creazione del motivo.

• I metodi fillTextText() o strokeText() del contesto sono richiamati e utilizzano un font con un'origine che non è lo uguale a quello dell'oggetto Document che possiede l'elemento canvas.

Source