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

getImageData - практически бесполезная функция, если вы не знаете, что делаете (т.е. проверяете обнаружение попадания, фильтруете пиксели), но даже тогда она мучительно медленная.

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

Суть кода такова:

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

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

Answer 2

После определения области отсечения нарисуйте исходный холст, используя 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);