Come correggere l'errore getImageData () La tela è stata contaminata da dati di origine incrociata?

Il mio codice funziona molto bene sul mio localhost ma non funziona sul sito.

Ho ricevuto questo errore dalla console, per questa riga .getImageData(x,y,1,1).data:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 

parte del mio codice:

jQuery.Event.prototype.rgb=function(){
        var x =  this.offsetX || (this.pageX - $(this.target).offset().left),y =  this.offsetY || (this.pageY - $(this.target).offset().top);
        if (this.target.nodeName!=="CANVAS")return null;
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

Nota: il mio URL immagine (src) proviene da un URL sottodominio

Come altri hanno già detto che stai "contaminando" la tela caricando da un dominio di origini incrociate.

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

Tuttavia, potresti essere in grado di impedirlo semplicemente impostando:

img.crossOrigin = "Anonymous";

Funziona solo se il server remoto imposta correttamente la seguente intestazione:

Access-Control-Allow-Origin "*"

Il selettore di file Dropbox quando si utilizza l'opzione "collegamento diretto" ne è un ottimo esempio. Lo uso su oddprints.com per eseguire l'hoover delle immagini dall'URL dell'immagine della casella personale remota nella mia tela e quindi inviare nuovamente i dati dell'immagine nel mio server. Tutto in javascript

Ho scoperto che dovevo usare .setAttribute('crossOrigin', '')e ho dovuto aggiungere un timestamp alla stringa di query dell'URL per evitare una risposta 304 priva Access-Control-Allow-Origindell'intestazione.

Questo mi dà

var url = 'http://lorempixel.com/g/400/200/';
var imgObj = new Image();
imgObj.src = url + '?' + new Date().getTime();
imgObj.setAttribute('crossOrigin', '');

Non sarai in grado di disegnare le immagini direttamente da un altro server in un'area di disegno e quindi utilizzarle getImageData. È un problema di sicurezza e la tela sarà considerata "contaminata".

Funzionerebbe per te salvare una copia dell'immagine sul tuo server usando PHP e quindi caricare la nuova immagine? Ad esempio, potresti inviare l'URL allo script PHP e salvarlo sul tuo server, quindi restituire il nuovo nome file al tuo javascript in questo modo:

<?php //The name of this file in this example is imgdata.php

  $url=$_GET['url'];

  // prevent hackers from uploading PHP scripts and pwning your system
  if(!@is_array(getimagesize($url))){
    echo "path/to/placeholderImage.png";
    exit("wrong file type.");
  }

  $img = file_get_contents($url);

  $fn = substr(strrchr($url, "/"), 1);
  file_put_contents($fn,$img);
  echo $fn;

?>

Utilizzeresti lo script PHP con alcuni javascript ajax come questo:

xi=new XMLHttpRequest();
xi.open("GET","imgdata.php?url="+yourImageURL,true);
xi.send();

xi.onreadystatechange=function() {
  if(xi.readyState==4 && xi.status==200) {
    img=new Image;
    img.onload=function(){ 
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
    img.src=xi.responseText;
  }
}

Se lo usi getImageDatasulla tela dopo, funzionerà benissimo.

In alternativa, se non si desidera salvare l'intera immagine, è possibile passare le coordinate x & y allo script PHP e calcolare il valore rgba del pixel su quel lato. Penso che ci siano buone librerie per fare quel tipo di elaborazione delle immagini in PHP.

Se vuoi usare questo approccio, fammi sapere se hai bisogno di aiuto per implementarlo.

edit-1: peeps ha sottolineato che lo script php è esposto e consente a Internet di utilizzarlo potenzialmente in modo dannoso. ci sono milioni di modi per gestirlo, uno dei più semplici è una sorta di offuscamento dell'URL ... credo che le pratiche di php sicure meritino un google separato; P

edit-2: a grande richiesta, ho aggiunto un segno di spunta per assicurarmi che sia un'immagine e non uno script php (da: controllo PHP se il file è un'immagine ).

Stavo vedendo questo errore Chromementre stavo testando il mio codice localmente. Sono passato a Firefoxe non vedo più l'errore. Forse passare a un altro browser è una soluzione rapida.

Se stai usando la soluzione fornita nella prima risposta, assicurati di aggiungere img.crossOrigin = "Anonymous";subito dopo aver dichiarato la imgvariabile (ad es. var img = new Image();).

Il tuo problema è che carichi un'immagine esterna, ovvero da un altro dominio. Ciò provoca un errore di sicurezza quando si tenta di accedere a qualsiasi dato del contesto del canvas.

Stai "contaminando" la tela caricando da un dominio di origini incrociate. Dai un'occhiata a questo articolo MDN:

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

Quando lavori su locale aggiungi un server

Ho avuto un problema simile quando lavoravo su locale. L'URL sarà il percorso del file locale, ad esempio il file: ///Users/PeterP/Desktop/folder/index.html.

Si prega di notare che sono su un MAC.

Ho risolto il problema installando http-server a livello globale. https://www.npmjs.com/package/http-server

passi:

1. Installazione globale: npm install http-server -g
2. Esegui server: http-server ~/Desktop/folder/

PS: Presumo che tu abbia un nodo installato, altrimenti non otterrai comandi npm molto lontani.

Come dice matt burns nella sua risposta , potrebbe essere necessario abilitare CORS sul server in cui sono ospitate le immagini problematiche.

Se il server è Apache, questo può essere fatto aggiungendo il seguente frammento (da qui ) alla configurazione di VirtualHost o a un .htaccessfile:

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

... se lo aggiungi a VirtualHost, probabilmente dovrai ricaricare anche la configurazione di Apache (es. sudo service apache2 reloadse Apache è in esecuzione su un server Linux)

Il mio problema era così incasinato che ho solo codificato in base64 l'immagine per garantire che non potessero esserci problemi CORS

Oggi incontro lo stesso problema e lo risolvo con il codice seguente.

codice html:

<div style='display: none'>
  <img id='img' src='img/iak.png' width='600' height='400' />
</div>
<canvas id='iak'>broswer don't support canvas</canvas>

codice js:

var canvas = document.getElementById('iak')
var iakImg = document.getElementById('img')
var ctx = canvas.getContext('2d')
var image = new Image()
image.src=iakImg.src
image.onload = function () {
   ctx.drawImage(image,0,0)
   var data = ctx.getImageData(0,0,600,400)
}

codice come sopra e non esiste alcun problema tra domini.

Stavo avendo lo stesso problema, e per me ha funzionato semplicemente concatenando https:${image.getAttribute('src')}