javascript - drawImage/putImageData를 사용하여 클립하는 방법

Question

캔버스에 이미지의 정적 자르기가 필요한 응용 프로그램을 작성 중입니다 (캔버스에서 이미지를 움직이면 자르기 영역이 한 곳에 유지됨). 3 가지 경우가 있습니다 : 다각형, 타원, 이미지로 지정된 모양. 폴리곤과 타원에 대해서는 대처할 수 있었기 때문에 경로와 호를 사용하여 처리 할 수 ​​있었지만 이미지를 통해 지정된 마스크는 무엇을해야할지 잘 모릅니다. Let's say I am not able to draw it using paths

그래서 나는 그것을 이미지로 지정이, 내가 그것에서 이미지 데이터를 얻는 방법을 알고에

예 모양 클립합니다. 내가 얻으려고하는 것은 그 숫자에서 벗어나는 모든 것을 잘라내는 것입니다.

canvas.clipTo = function (ctx) { 
    ctx.drawImage(shape.src, left, top); 
}; 

을 그리고 다음과 같이 :

나는이 같은 노력했다 내가 예상 한대로 그들 중 누구도 작동하지

canvas.clipTo = function (ctx) { 
    ctx.putImageData(imgData, left, top); 
}; 

물론

, 그것은 단지에 클리핑 대신 그 검은 모양을 그립니다 부위.

아이디어가 있습니까?

Answer 1

마스크 이미지와 동일한 크기의 새 캔버스를 만들어서 만듭니다. 그런 다음이 가장 확실히 중복 질문으로 이미지 (을 마스킹)을 통해 마스크를 그릴 ctx.globalCompositeOperation"destination-in"에, 그때 ctx.drawImage

으로 화면 캔버스에 그 캔버스를 그릴 설정, 그 캔버스에 이미지를 그릴 나는 코드로서 대답을주지 않을 것이다, 그것은 stackoverflow에서 여기에 죽음에 이르렀다.

아, 깜박했습니다. clip에 imageData를 사용하는 것은 매우 비효율적 인 방법입니다.