canvas getImageData 두 이미지

Question

모두

내 캔버스 객체에있는 이미지의 색상을 가져와야합니다. 내가 지금 뭐하는 거지 무엇

:

_canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data; 

이 내가 원하는 것입니다,하지만 난 두 개의 이미지를 가지고 ... does'nt 하나는 다른 하나는 동일합니다 ... 색상 만 드 무승부가 , 각 부분에 색상이 있습니다 ... 사용자에게 .. 색상이없는 이미지 ... 그리고 마우스를 가져 가면 "뒤로"색상을 얻고 싶습니다.

여기에서 내가하려고하는 것을 이해하시기 바랍니다.

loadIMLImage(context, "http://localhost:51413/img/image_color.png"); 
loadIMLImage(context, "http://localhost:51413/img/image.png"); 

을하고이 어떤 도움을 이해할 수있을 것이다

function loadIMLImage(context, source) { 
     base_image = new Image(); 
     base_image.src = source; 
     base_image.onload = function() { 
      context.drawImage(base_image, 100, 100); 
     } 
     return base_image; 
    } 

하는 방법입니다 :

나는이 방법으로 이미지를 추가하고있다. 다음 작업을 수행 할 수있는이 시나리오의

Answer 1

:

• 메인 이미지를 그리기 백 버퍼의 첫 번째 이미지
• 다시 사용할 픽셀 버퍼의 압축을 풉니 다 (세계적으로 저장)
• 그리기를
• 이미 추출한 버퍼로 좌표를 확인하는 경우

이미지를로드했다고 가정 할 경우 :

var context = _canvas.getContext('2d'), 
    buffer; 

...image loaded and ready here... 

// draw back image 
context.drawImage(backImage, 0, 0); 

// extract buffer right away 
buffer = context.getImageData(0, 0, _canvas.width, _canvas.height).data; 

// draw main image on top (clear canvas first if smaller) 
context.drawImage(mainImage, 0, 0); 

버퍼 및 캔버스가 준비되었습니다. 가지고있는 버퍼는 복사본이며 압축을 푼 후에는 변경 내용의 영향을받지 않으므로 변경에 대해 안전합니다. 인수로 이벤트와 각 이벤트 호출에 대한 지금

:

function getPixel(e) { 

    var rect = _canvas.getBoundingClientRect(), // get canvas abs. position 
     x = e.clientX - rect.left,    // adjust mouse positions 
     y = e.clientY - rect.top, 
     p = (y * _canvas.width + x) * 4;  // calc offset in buffer 

    return { 
     r: buffer[p], 
     g: buffer[p+1], 
     b: buffer[p+2], 
     a: buffer[p+3] 
    }; 
} 

뿐만 아니라이 빨리 당신이 CPU를 통해 버퍼마다의 일부를 추출 할 필요가 없기 때문에 작동하지만, 그렇지 않습니다 두 번째 캔버스를 만들 필요가 있습니다. 두 번째 캔버스는 선택적인 방법입니다.

희망이 도움이됩니다.