javascript - tainted - Cómo reparar el error getImageData() El lienzo ha sido contaminado por datos de origen cruzado?

tainted canvases may not be exported fix

Question

Mi código está funcionando muy bien en mi servidor local, pero no está funcionando en el sitio.

.getImageData(x,y,1,1).data este error desde la consola, para esta línea .getImageData(x,y,1,1).data :

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

parte de mi código:

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: mi url de imagen (src) proviene de una URL de subdominio

Answer 1

Como dice Mate Burns en su respuesta , es posible que deba habilitar CORS en el servidor donde se alojan las imágenes problemáticas.

Si el servidor es Apache, puede hacerlo agregando el siguiente fragmento (desde here ) a su configuración VirtualHost o a un archivo .htaccess :

<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>

... si lo agrega a VirtualHost, probablemente necesite volver a cargar la configuración de Apache (por ejemplo, sudo service apache2 reload si Apache se ejecuta en un servidor Linux)

Answer 2

Como otros han dicho, estás "contaminando" el lienzo cargando desde un dominio de origen cruzado.

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

Sin embargo, puede evitar esto simplemente configurando:

img.crossOrigin = "Anonymous";

Esto solo funciona si el servidor remoto establece apropiadamente el siguiente encabezado:

Access-Control-Allow-Origin "*"

El selector de archivos de Dropbox cuando se utiliza la opción "enlace directo" es un gran ejemplo de esto. Lo uso en oddprints.com para hoover las imágenes de la url de la imagen de Dropbox remoto, en mi lienzo, y luego enviar los datos de la imagen de nuevo a mi servidor. Todo en javascript :)

Answer 3

Descubrí que tenía que usar .setAttribute(''crossOrigin'', '''') y tenía que anexar una marca de tiempo a la cadena de consulta de la URL para evitar una respuesta 304 que carecía del encabezado Access-Control-Allow-Origin .

Esto me da

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

Answer 4

Estás "contaminando" el lienzo cargando desde un dominio de origen cruzado. Mira este artículo de MDN:

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

Answer 5

Hoy encuentro el mismo problema y lo soluciono con el siguiente código.

código 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>

código 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)
}

código como el anterior, y no hay un problema entre dominios.

Answer 6

No podrá dibujar imágenes directamente desde otro servidor en un lienzo y luego usar getImageData . Es un problema de seguridad y el lienzo se considerará "contaminado".

¿Te sería útil guardar una copia de la imagen en tu servidor usando PHP y luego cargar la nueva imagen? Por ejemplo, puede enviar la URL al script PHP y guardarlo en su servidor, luego, devuelva el nuevo nombre de archivo a su javascript de esta manera:

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

  $url=$_GET[''url''];
  $img = file_get_contents($url);
  $fn = substr(strrchr($url, "/"), 1);
  file_put_contents($fn,$img);
  echo $fn;

?>

Utilizarías el script PHP con javascript ajax como este:

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;
  }
}

Si usa getImageData en el lienzo después de eso, funcionará bien.

Alternativamente, si no desea guardar la imagen completa, puede pasar las coordenadas xey al script PHP y calcular el valor rgba del píxel en ese lado. Creo que hay buenas bibliotecas para hacer ese tipo de procesamiento de imágenes en PHP.

Si desea utilizar este enfoque, avíseme si necesita ayuda para implementarlo.

Answer 7

Su problema es que carga una imagen externa, es decir, desde otro dominio. Esto provoca un error de seguridad cuando intenta acceder a cualquier dato de su contexto canvas.