getImageData() 함수에서 가져온 이미지를 어떻게 자르나요?

Question

원본 캔버스의 내용을 가져 와서 클립하고 다른 캔버스에 그려 넣으려고합니다. 내 코드는 src PNG/new Image() 콤보를 사용하여 매력처럼 작동하지만 소스 콘텐츠가 다른 캔버스에서 제공 될 때는 그렇지 않습니다.

코드는 :

var imgData = src_ctx.getImageData(x, y, w, h); 
dest_ctx.putImageData(imgData, x, y+h); 

ctx.beginPath(); // Filled triangle 
ctx.moveTo(x1,y1); 
ctx.lineTo(x2,y2); 
ctx.lineTo(x2,0); 
ctx.lineTo(x1,0);    
ctx.clip(); 

Answer 1

클립핑 영역을 형성 한 후,이 대신 imageData의 설정과의 drawImage을 사용하여 소스 캔버스를 그린다. 당신이 (픽셀을 필터링, 즉. 히트 감지 검사) 당신이 무슨 일을하는지 알고 있지만 그렇다하더라도 그것은 고통스럽게 느린 경우를 제외하고

dest_ctx.beginPath(); // Filled triangle 
dest_ctx.moveTo(x1,y1); 
dest_ctx.lineTo(x2,y2); 
dest_ctx.lineTo(x2,0); 
dest_ctx.lineTo(x1,0);    
dest_ctx.clip(); 

// You can control wich region to draw using all the arguments 
// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 
dest_ctx.drawImage (srcCanvas, x, y); 

Answer 2

getImageData은 거의 쓸모없는 기능입니다. 기본적으로

1 canvas = document.getElementById('canvas'); 
2 ctx = canvas.getContext("2d"); 
3 _canvas=document.createElement('canvas'); 
4 _ctx = _canvas.getContext("2d"); 
5 _canvas.width = 200; 
6 _canvas.height = 200; 
7 
8 _ctx.beginPath(); 
9 _ctx.arc(100, 100, 100,0,Math.PI*2,true); 
10 _ctx.clip(); 
11 _ctx.drawImage(img1, 0, 0); 
12   
13 ctx.drawImage(_canvas, 1.25 * i * _canvas.width, 500); 

A를 클리핑되어 무슨 일을 :

나는 (! 내가 거기에 무슨 짓을했는지 참조) 주변에 바이올린

을 다음과 같이 코드의 핵심은 당신을 위해 JSfiddle example을 생성 캐쉬 캔버스 (_canvas, 10 및 11 행) 및 기본 캔버스 (canvas, 13 행)로 그리기.

참고 : 이미지가 클립 중앙에 오도록 변환하는 것이 가장 이상적이지만, 여전히은 특히 클립과 같은 다른 변형과 결합 할 때 번역 주위에 머리를 맞출 수 없습니다.