캔버스 픽셀의 색이 맞는지 확인

Question

캔버스에 CSS background-color: #D3D3D3; 및 하나의 속성 ctx.fillStyle = "#000";이 있습니다.
이 JS 코드는 획을 그대로두고 모든 것을 투명하게 만들어야합니다. 어떻게이 일을 성취 할 수 있습니까?

imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data; 

let clearBack = imageData; 
for (var i = 3; i < clearBack.length; i += 4) { 
    if (pixle is not black) { //if pixel belongs to the stroke leave it 
    clearBack[i] = 0; 
    } 
} 

Answer 1

닫기가 완료되었습니다. 4 픽셀 (빨간색 녹색 파란색 알파)마다 이동하고 imageData로 각 색상을 확인할 수 있습니다. 그렇다면 검은 색이 아니라면 원하는대로하십시오.

putImageData을 사용하면 수정 된 픽셀을 다시 화면에 다시 쓸 수 있습니다. 원래 ImageData 개체를 imageData var에 유지해야합니다.

imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); //take away the .data 

var r, g, b, a; 

for(var i = 0; i+3 < imageData.data.length; i+=4) { 
    r = imageData.data[i]; 
    g = imageData.data[i+1]; 
    b = imageData.data[i+2]; 
    a = imageData.data[i+3]; 

    if((r > 0 || g > 0 || b > 0) && a > 0) { // if pixel is not black, and not transparent   
     imageData.data[i+3] = 0; //set alpha to 0 
    } 
} 

ctx.putImageData(imageData, 0, 0); //put the imageData back to the screen 

Heres a fiddle. 나는 거기에서 약간 다른 것을하고 있었다. 그러나 당신은 생각을 얻는다.

https://jsfiddle.net/q0n5sxku/