Объединение двух изображений на одном холсте в HTML5

Question

Я работаю с элементом HTML5 canvas. Допустим, у меня есть 2 объекта ImageData, которые я хочу объединить, чтобы иметь возможность поместить на один холст. Предположим, мне все равно, как эти изображения объединяются. Оба объекта ImageData имеют одинаковое количество пикселей и форму.

Как лучше всего объединить два изображения?

Я полагаю, что могу написать цикл for и перебрать массив ImageData, а также вручную объединить и установить каждое значение rgba на пиксель, но мне интересно, есть ли лучший способ? Мне нужно, чтобы эта операция произошла как можно быстрее.

Заранее спасибо.

Answer 1

Если вы просто хотите наложить одно изображение поверх другого, вы, вероятно, захотите сделать что-то вроде этого:

ctx.drawImage(image1, x, y);
// adjust globalAlpha as needed, or skip if the image has its own transparency
ctx.globalAlpha = 0.5;
ctx.drawImage(image2, x, y);

ИЛИ, в зависимости от конкретного эффекта, который вам нужен:

ctx.drawImage(image1, x, y);
ctx.globalCompositeOperation = "lighten"; // many other possibilities here
ctx.drawImage(image2, x, y);

Вероятно, это будет быстрее, чем рисование попиксельно с помощью методов get / putImageData, хотя и в зависимости от того, насколько браузер зависит.