Impossibile ottenere i dati dell'immagine dal canvas perché il canvas è stato macchiato dai dati di origine incrociata

Sto utilizzando HTML Canvas per ottenere colori dall'immagine. Per questo ho scritto il seguente codice in javascript:Impossibile ottenere i dati dell'immagine dal canvas perché il canvas è stato macchiato dai dati di origine incrociata

http://jsfiddle.net/8dQSS/1/ (Controllo di Pls la console per vedere l'eccezione)

function getImageColor() { 
    var colors = []; 
    var image = new Image(); 

    image.onload = function() { 
     var canvas = document.createElement("canvas"); 
     canvas.width = image.width; 
     canvas.height = image.height; 

     // Draw the image in canvas 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(image, 0, 0); 

     // Get the pixel data 
     var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); 

     // Loop through imageData.data - an array with 4 values per pixel: red, green, blue, and alpha 
     for (var x = 0; x < imageData.width; x++) { 
      for (var y = 0; y < imageData.height; y++) { 
       var index = 4 * (y * imageData.width + x); 
       var r = imageData.data[index]; 
       var g = imageData.data[index + 1]; 
       var b = imageData.data[index + 2]; 
       var a = imageData.data[index + 3]; 

       colors.push("rgb(" + r + "," + g + "," + b + ")"); 
      } 
     } 
    }; 
    image.src = "http://www.xxxxxxxxxxxx.com/demos/assets/image.jpg"; 
}

Il codice di cui sopra sta gettando la seguente eccezione:

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

Can

nessuno per favore dimmi come risolvere questo problema?

fonte

2013-01-21 gaurav

Non utilizzare le immagini da altri domini, il cui contenuto non è consentito per accedere? – Bergi

Forse aiuterà a diagnosticare (è un vecchio post): ho questo errore da una tela mi sono generato da un URI di dati creato da un elemento SVG, senza immagini. Funziona su FF e Safari bene. – LeeGee

L'immagine viene creata da un'immagine creata in modo dinamico con JavaScript da un elemento SVG e passata come URI di dati. È un problema, quindi: "Uncaught SecurityError: è stato effettuato un tentativo di superare la politica di sicurezza dell'agente utente". Chrome sta cercando di essere troppo intelligente? – LeeGee

L'unica soluzione che so è di avere l'immagine che si desidera caricare ospitata sullo stesso server dei file, non è possibile accedere e gestire qualsiasi immagine desiderata sul web attraverso la tela.

MODIFICA: Se vuoi puoi fare like this.

fonte

2013-01-21 12:22:35 Razouille

Si sta utilizzando questo file system.? Se sì, eseguirlo sul server (localhost).

fonte

2013-05-06 12:01:51

Grazie mille! questo è esattamente ciò di cui avevo bisogno – Maccle415

Ho ricevuto lo stesso errore. Ho cercato molto su crossorigin su tela. La prima soluzione è stata aggiungere img.crossOrigin='anonymous'. Ma il problema rimane ancora. Stavo usando le risorse servite da s3 e ho risolto il problema aggiungendo questo sulla politica del bucket.

{ 
    "Version": "2008-10-17", 
    "Statement": [ 
    { 
     "Sid": "AllowPublicRead", 
     "Effect": "Allow", 
     "Principal": { 
     "AWS": "*" 
     }, 
     "Action": "s3:GetObject", 
     "Resource": "arn:aws:s3:::seu-candidato/*" 
    } 
    ] 
}

Gli attivi dal secchio avevano alcuni params come X-Amz-Expires, X-Amz-Date ho tolto loro e il mio problema ws fissati

fonte

2016-08-27 22:34:26

Impossibile ottenere i dati dell'immagine dal canvas perché il canvas è stato macchiato dai dati di origine incrociata

risposta

Problemi correlati