getImageData () 오류 수정 방법 교차 출처 데이터로 인해 캔버스가 오염 되었습니까?

내 코드는 로컬 호스트에서 잘 작동하지만 사이트에서는 작동하지 않습니다.

이 줄에 대해 콘솔 에서이 오류가 발생했습니다 .getImageData(x,y,1,1).data.

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

내 코드의 일부 :

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

참고 : 내 이미지 URL (src)은 하위 도메인 URL에서 온 것입니다.

다른 사람들이 말했듯이 크로스 원점 도메인에서로드하여 캔버스를 "오염"하고 있습니다.

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

그러나 다음을 간단히 설정하여이를 방지 할 수 있습니다.

img.crossOrigin = "Anonymous";

이것은 원격 서버가 다음 헤더를 적절하게 설정 한 경우에만 작동합니다.

Access-Control-Allow-Origin "*"

"직접 링크"옵션을 사용할 때 의 Dropbox 파일 선택기 는 이에 대한 좋은 예입니다. 나는 oddprints.com 에서 그것을 사용 하여 원격 dropbox 이미지 URL에서 캔버스로 이미지 를 가져간 다음 이미지 데이터를 다시 서버로 제출합니다. 자바 스크립트의 모든

헤더 .setAttribute('crossOrigin', '')가없는 304 응답을 피하기 위해 URL 쿼리 문자열에 타임 스탬프 를 사용해야 하고 타임 스탬프를 추가 해야한다는 것을 알았습니다 Access-Control-Allow-Origin.

이것은 나를 준다

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

다른 서버에서 직접 캔버스로 이미지를 그린 다음을 사용할 수 없습니다 getImageData. 보안 문제이며 캔버스는 "오염 된"것으로 간주됩니다.

PHP를 사용하여 이미지 사본을 서버에 저장 한 다음 새 이미지를로드하는 것이 효과가 있습니까? 예를 들어, URL을 PHP 스크립트로 전송하여 서버에 저장 한 후 다음과 같이 새 파일 이름을 자바 스크립트로 반환 할 수 있습니다.

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

?>

PHP 스크립트를 다음과 같은 ajax javascript와 함께 사용하십시오.

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

getImageData그 후에 캔버스에서 사용 하면 제대로 작동합니다.

또는 전체 이미지를 저장하지 않으려면 x & y 좌표를 PHP 스크립트에 전달하고 해당면의 픽셀 rgba 값을 계산할 수 있습니다. PHP에서 이러한 종류의 이미지 처리를 수행하기위한 좋은 라이브러리가 있다고 생각합니다.

이 방법을 사용하려면 구현에 도움이 필요하면 알려주십시오.

편집-1 : PHP 스크립트가 노출되어 인터넷에서 악의적으로 잠재적으로 사용할 수 있다고 지적했습니다. 이것을 처리하는 백만 가지 방법이 있습니다. 가장 단순한 URL 난독 화 중 하나입니다 ... 보안 PHP 사례는 별도의 Google 자격이 있습니다 .P

편집-2 : 대중의 요구에 따라 PHP 스크립트가 아닌 이미지인지 확인하기 위해 검사를 추가했습니다 (보낸 사람 : 파일이 이미지 인 경우 PHP 확인 ).

Chrome코드를 로컬에서 테스트하는 동안 이 오류가 발생했습니다 . 전환했는데 Firefox더 이상 오류가 표시되지 않습니다. 다른 브라우저로 전환하는 것이 빠른 해결책 일 수 있습니다.

첫 번째 답변에서 제공된 솔루션을 사용하는 경우 변수 img.crossOrigin = "Anonymous";를 선언 한 직후 img(예 :) 추가해야합니다 var img = new Image();.

문제는 다른 도메인에서 의미하는 외부 이미지를로드한다는 것입니다. 캔버스 컨텍스트의 데이터에 액세스하려고하면 보안 오류가 발생합니다.

교차 원점 도메인에서로드하여 캔버스를 "오염"시킵니다. 이 MDN 기사를 확인하십시오.

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

로컬에서 작업 할 때 서버 추가

현지에서 일할 때 비슷한 문제가 발생했습니다. url은 로컬 파일의 경로가됩니다 (예 : file : ///Users/PeterP/Desktop/folder/index.html).

MAC에 있습니다.

http-server를 전 세계적으로 설치 하여이 문제를 해결했습니다. https://www.npmjs.com/package/http-server

단계 :

1. 글로벌 설치 : npm install http-server -g
2. 서버를 실행하십시오. http-server ~/Desktop/folder/

추신 : 노드가 설치되어 있다고 가정합니다. 그렇지 않으면 npm 명령을 실행하지 않아도됩니다.

matt burns가 그의 답변 에서 언급했듯이 문제 이미지가 호스팅되는 서버에서 CORS를 활성화해야 할 수도 있습니다.

서버가 Apache 인 경우 다음 스 니펫 ( 여기에서 )을 VirtualHost 구성 또는 .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>

... VirtualHost에 추가하는 경우 Apache의 구성도 다시로드해야합니다 (예 : sudo service apache2 reloadApache가 Linux 서버에서 실행중인 경우).

내 문제가 너무 엉망이되어 CORS 문제가 발생하지 않도록 이미지를 base64로 인코딩했습니다.

나는 오늘 같은 문제를 겪고 코드에 따라 해결합니다.

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>

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

위와 같은 코드를 사용하고 도메인 간 문제는 없습니다.

나는 같은 문제를 겪고 있었고, 단순히 연결하여 작동했습니다. https:${image.getAttribute('src')}