캔버스에서 픽셀을 조작하려면 어떻게해야합니까?

Question

날 내가 무엇을 달성하고자하는 설명하게 .. 난 그냥 제외

www.milliondollarhomepage.com

와 유사한 실험을 재미와 학습으로 무언가를 짓고 있어요

, 내가 사용하고자하는 캔버스 및/또는 Fabric.js를 사용하여 동일한 작업을 수행 할 수 있습니다. 캔버스에서 각 픽셀을 조작하는 방법은 무엇입니까?

시나리오 :

나는 횡령에 대한 1000 개 픽셀을 제공 할

• .
• 사용자가 이미지를 선택할 수 있으며 이미지를 캔버스에 놓을 수 있습니다.
• 이미지는 사용자가 원하는 픽셀 수에 따라 크기를 조정할 수 있으며 나머지 전체 픽셀에서 공제 할 수 있습니다.

이 문제에 대한 도움이 필요하십니까?

Answer 1

개별 픽셀의 조작을 위해 HTML5 캔버스 API의 방법은 예를 들어

context.getImageData(x,y,width,height); 

이다

var map = context.getImageData(0,0,canvas.width,canvas.height); 

이 반복 순서로 포함하는 대규모 어레이 반환

[red,green,blue,alpha,red,green,blue,alpha...] 

을 4의 숫자는 모두 빨강, 녹색, 파랑 및 알파 채널을 나타냅니다. f 또는 선택된 영역의 모든 단일 픽셀, 왼쪽에서 오른쪽, 위에서 아래.

이 숫자 각각의 값은 0 - 255 범위의 정수입니다.

루프 그들의 red 및 blue 채널의 모든 픽셀을 통해 드롭 따라서이 절차는 서버에서 수행 될 수 있다는

//assume map variable from earlier 

for(var i = 0; i < map.data.length; i+=4){ 
    map.data[i] = 0; // drop red to 0 
    map.data[i+2] = 0; // drop blue to 0 
} 
context.putImageData(map,0,0); 

가

See Example

참고 예를 들어, 이미지가 녹색 온 및 캔버스를 "오염시키는"다른 도메인의 이미지없이. 이러한 요구 사항이 충족되지 않으면 보안 오류 DOM 예외가 발생합니다.