Как скопировать изображение, полученное из функции 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

После определения области обрезки, нарисуйте исходный холст, используя DrawImage, вместо установки ImageData.

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 является практически бесполезной функцией, если вы не знаете, что вы делаете (то есть. Проверка для обнаружения попадания, фильтрации пикселей), но даже тогда это мучительно медленно.

Я создал JSfiddle example для вас возиться с (посмотреть, что я там делал!)

Сердце кода выглядит следующим образом:

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); 

По существу, что вы делаете обрезание к (_canvas, строки 10 и 11) и рисование этого основного холста (canvas, строка 13).

Примечание: в идеале вы должны перевести свое изображение таким образом, чтобы оно было в центре клипа, но я не могу получить свою голову вокруг переводов, особенно в сочетании с другими преобразованиями, такими как клипы.