캔버스에서 이미지 데이터를 가져올 수 없습니다

Question

, 대한 기존 캔버스 context.getImageData()를 사용하여 이미지 (이미 웹 페이지에로드), 페이지에 표시되지 않은 두 번째 캔버스를 포함하는 (이미지 데이터를 받아야 다음 함수.

첫 번째 캔버스의 데이터가 예상대로 "획득"되고 alert(data1.data.length)이 합리적인 숫자로 팝업되지만 두 번째 캔버스의 데이터가 "얻은"데이터가 아니며 함수가 alert(data2.data.length); 행보다 먼저 나옵니다. 그 모든 기능에서 작동하지 않는 것, 그리고 내 문제입니다. 내 문제입니다. 내 문제는 내 문제입니다.

function operateImage(){ 

    var operand = new Image(); 
    var data1, data2; 
    //exisiting canvas 
    var c =document.getElementById("edit_canvas"); 
    var ctx=c.getContext("2d"); 

    var operation = document.getElementById("operation").value; 

    //make a new temporary canvas and store the input image 
    var hiddenCanvas = document.createElement('canvas'); 
    var hiddenCtx = hiddenCanvas.getContext('2d'); 
    operand.src = document.getElementById("operation_image").value; 
    hiddenCanvas.width = operand.width; 
    hiddenCanvas.height = operand.height; 

    hiddenCtx.drawImage(operand,0,0); 
    //get image data objects from both canvases 
    data1 = ctx.getImageData(0,0,c.width,c.height); 
    alert(data1.data.length); 
    data2 = hiddenCtx.getImageData(0,0,hiddenCanvas.width,hiddenCanvas.height); 
    alert(data2.data.length); 

    /*pass the two image data objects to another function for processing*/ 
} 

A 기능은 작동 값에 따라 다른 기능으로 이미지 데이터를 전달합니다. (AND, OR, XOR 또는 픽셀 데이터 배열의 내용을 함께 나타내지는 않습니다)

편집 : 다음과 같은 오류 메시지가 표시됩니다. "CanEnce SecurityError : 'CanvasRenderingContext2D'에서 'getImageData'를 실행하지 못했습니다. 캔버스는 교차 출처 데이터에 의해 오염되었습니다. "

Answer 1

코드에 문제가 없지만 원본 이미지 (operand.src)가 다른 도메인에 있고 원본 교차 작업이 허용되지 않아 실패했습니다. 더 구체적으로 말하자면, 다른 원점을 가진 이미지를 그린 캔바스에서 ImageData를 가져올 수 없습니다.

소스 이미지가있는 서버에 액세스 할 수있는 경우가 아니면 불행히도 해결책이 없습니다.

operand.crossOrigin = 'anonymous'; 

설정을 : 클라이언트 측에서, 당신은 당신의 숨겨진 캔버스에 그리기 전에 출처 간 소스를 를 허용해야,

Access-Control-Allow-Origin: * 

그리고 : 서버는이 같은 HTTP 헤더를 설정해야 이러한 값 (* 및 '익명')은 원점 교차 검사를 완전히 비활성화합니다. 이는 원하는 결과가 아닐 수 있습니다. 사용할 특정 도메인과 일치하는 값을 설정할 수 있습니다.