Como corrigir erro getImageData () A tela foi manchada por dados de origem cruzada?

Meu código está funcionando muito bem no meu host local, mas não está funcionando no site.

Eu recebi esse erro do console, para esta linha .getImageData(x,y,1,1).data:

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

parte do meu 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: meu URL de imagem (src) é de um URL de subdomínio

Como já foi dito, você está "contaminando" a tela carregando em um domínio de várias origens.

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

No entanto, você pode evitar isso simplesmente configurando:

img.crossOrigin = "Anonymous";

Isso funciona apenas se o servidor remoto definir o cabeçalho a seguir adequadamente:

Access-Control-Allow-Origin "*"

O seletor de arquivos do Dropbox ao usar a opção "link direto" é um ótimo exemplo disso. Eu o uso no site oddprints.com para recolher as imagens do URL da imagem da caixa de depósito remota, para a minha tela e depois enviar os dados da imagem de volta ao meu servidor. Tudo em javascript

Descobri que precisava usar .setAttribute('crossOrigin', '')e anexar um carimbo de data / hora à string de consulta do URL para evitar uma resposta 304 sem o Access-Control-Allow-Origincabeçalho.

Isso me dá

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

Você não poderá desenhar imagens diretamente de outro servidor em uma tela e usá-las getImageData. É uma questão de segurança e a tela será considerada "contaminada".

Funcionaria para você salvar uma cópia da imagem no seu servidor usando PHP e depois carregar a nova imagem? Por exemplo, você pode enviar a URL para o script PHP e salvá-la em seu servidor e, em seguida, retornar o novo nome do arquivo para o seu javascript da seguinte maneira:

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

?>

Você usaria o script PHP com algum 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;
  }
}

Se você usar getImageDataa tela depois disso, ela funcionará bem.

Como alternativa, se você não quiser salvar a imagem inteira, poderá passar as coordenadas x e y para o script PHP e calcular o valor rgba do pixel nesse lado. Eu acho que existem boas bibliotecas para fazer esse tipo de processamento de imagem em PHP.

Se você quiser usar essa abordagem, entre em contato se precisar de ajuda para implementá-la.

edit-1: peeps apontou que o script php está exposto e permite que a Internet o utilize potencialmente maliciosamente. existem milhões de maneiras de lidar com isso, uma das mais simples sendo algum tipo de ofuscação de URL ... eu acho que as práticas seguras de php merecem um google separado;

edit-2: por demanda popular, adicionei uma verificação para garantir que seja uma imagem e não um script php (em: PHP verifique se o arquivo é uma imagem ).

Eu estava vendo esse erro Chromeenquanto testava meu código localmente. Eu mudei para Firefoxe não estou mais vendo o erro. Talvez mudar para outro navegador seja uma solução rápida.

Se você estiver usando a solução dada na primeira resposta, adicione-o img.crossOrigin = "Anonymous";logo após declarar a imgvariável (por exemplo var img = new Image();).

Seu problema é que você carrega uma imagem externa, ou seja, de outro domínio. Isso causa um erro de segurança quando você tenta acessar quaisquer dados do seu contexto de tela.

Você está "manchando" a tela carregando de um domínio de várias origens. Confira este artigo da MDN:

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

Ao trabalhar no local, adicione um servidor

Eu tive um problema semelhante ao trabalhar no local. Seu URL será o caminho para o arquivo local, por exemplo, arquivo: ///Users/PeterP/Desktop/folder/index.html.

Observe que eu estou em um MAC.

Eu resolvi isso instalando o servidor http globalmente. https://www.npmjs.com/package/http-server

Passos:

1. Instalação global: npm install http-server -g
2. Execute o servidor: http-server ~/Desktop/folder/

PS: Eu suponho que você tenha um nó instalado, caso contrário, você não ficará muito longe executando os comandos npm.

Como Matt Burns diz em sua resposta , talvez seja necessário ativar o CORS no servidor em que as imagens com problemas estão hospedadas.

Se o servidor for Apache, isso pode ser feito adicionando o seguinte trecho ( daqui ) à sua configuração do VirtualHost ou a um .htaccessarquivo:

<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 adicioná-lo a um VirtualHost, você provavelmente precisará recarregar a configuração do Apache também (por exemplo, sudo service apache2 reloadse o Apache estiver executando em um servidor Linux)

Meu problema estava tão ruim que eu apenas codifiquei a imagem base64 para garantir que não houvesse problemas com o CORS

Hoje, encontro o mesmo problema e resolvo-o pelo código a seguir.

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 acima, e não há problema entre domínios.

Eu estava tendo o mesmo problema e, para mim, funcionou simplesmente concatenando https:${image.getAttribute('src')}