문제가있는 경우 JavaScript에서 교차 오염을 피하는 방법을 이해하십시오.

다음 코드에서 교차 원점 오염에 대해 오류가 발생합니다. 그 이유를 알 수 없습니다. 외부 서버에서 이미지를 추출하려고했지만 교차 이미지가 로컬 디렉토리에있는 경우 크로스 기점 오염이 발생했다고 생각했습니다.문제가있는 경우 JavaScript에서 교차 오염을 피하는 방법을 이해하십시오.

var image = new Image(); 
$(image).on("load", function() { 
    ctx.drawImage(image, 0, 0, 1080/scale, 1920/scale); 

    /*Error occurs here */ 
    var imageData = ctx.getImageData(0, 0, 
     this.width/scale, 
     this.height/scale); 
    var pixels = imageData.data; 

    ... 
}); 
image.src = "test2.jpg";

출처

2014-07-16 A4Treok

"local"을 정의하십시오. 이 파일은 실제로 HTTP 서버를 통해 호스트되고 있습니까, 아니면'file : //'을 통해 액세스하고 있습니까? –

file : //을 통해 액세스하고 있습니다. – A4Treok

대부분 (모든?) 브라우저는 로컬 파일 시스템에 대한 액세스를 허용하지 않습니다. 브라우저에 따라이를 무시할 수 있습니다 (예 : Chrome에서 '--allow-file-access-from-files'플래그 지원). 이 작업을 수행해야하는지 여부는 다른 보안 계층에서의 자신감과 웹 사용 방법에 달려 있습니다. –

로컬 파일 시스템이 교차 출처로 선언되어 캔버스를 오염시킵니다. 이것은 가장 중요한 정보가 로컬 파일 시스템에있을 가능성이 높기 때문에 좋은 선언입니다.

가 로컬 컴퓨터에 웹 서버를 설치하고 해당 서버에서 이미지 및 .html 중에서/.CSS /의 .js 파일을 모두 제공 :

여기 CORS 보안을 준수하는 몇 가지 방법입니다. PHP & IIS에는 모두 훌륭한 로컬 에디션이 있습니다.
CORS 준수 호스팅 서비스에 이미지를 (imagur.com이 다른 사람의 사이에서 하나입니다) 작은 프로젝트의 경우

출처

2014-07-16 02:20:41 markE

이미지가 작업 영역의 폴더에 있기 때문에 혼란 스럽습니다. 웹 페이지와 이미지가 모두 하나의 디렉토리에있는 경우 데스크톱에서 모두 고려해야합니까? – A4Treok

아니요, 모든 파일이 실제로 데스크톱에 있어야합니다. 이미지 파일에 로컬에서 생성되지 않았 음을 나타내는 속성 정보가 포함되어있는 경우에도이 옵션이 작동하지 않을 수 있습니다. 로컬 웹 서버를 설치하는 것이 좋습니다. 단,이 방법은 일회용 프로젝트 일뿐입니다. ;-) – markE

허, 괜찮아. 그러면 로컬 웹 서버를 설치합니다. 도움을 많이 주셔서 감사합니다! – A4Treok

문제가있는 경우 JavaScript에서 교차 오염을 피하는 방법을 이해하십시오.

답변

관련 문제