смешайте два изображения на холсте javascript

Question

Как смешать два массива данных пикселей, чтобы создать одно изображение? с возможностью использования разных режимов наложения?

Answer 1

Pixastic - это специальная структура для расширенного использования холста, вот примеры смешивания: http://www.pixastic.com/lib/docs/actions/blend/

Если вы хотите сделать это самостоятельно, вы можете извлечь данные пикселей из 2 изображений, смешав их с математическимуравнение и положить в холст.Вот информация о том, как получить и поместить данные пикселей с / на холст: http://ajaxian.com/archives/canvas-image-data-optimization-tip

---

Обновление: Простой пример с альфа-смешением 2 изображений в пропорции 50-50.(Изображения заимствованы из http://www.pixastic.com/sample/Butterfly.jpg и http://www.pixastic.com/sample/Flower.jpg)

<img src="Butterfly.jpg" id="img1">
<img src="Flower.jpg" id="img2">
<p>Blended image<br><canvas id="canvas"></canvas></p>
<script>
window.onload = function () {
    var img1 = document.getElementById('img1');
    var img2 = document.getElementById('img2');
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var width = img1.width;
    var height = img1.height;
    canvas.width = width;
    canvas.height = height;

    var pixels = 4 * width * height;
    context.drawImage(img1, 0, 0);
    var image1 = context.getImageData(0, 0, width, height);
    var imageData1 = image1.data;
    context.drawImage(img2, 0, 0);
    var image2 = context.getImageData(0, 0, width, height);
    var imageData2 = image2.data;
    while (pixels--) {
        imageData1[pixels] = imageData1[pixels] * 0.5 + imageData2[pixels] * 0.5;
    }
    image1.data = imageData1;
    context.putImageData(image1, 0, 0);
};
</script>

Answer 2

Я создал отдельную облегченную библиотеку с открытым исходным кодом для выполнения режимов наложения в стиле Photoshop из одного контекста HTML-холста в другой: context-blender .Вот пример использования:

// Might be an 'offscreen' canvas
var over  = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

См. README для получения дополнительной информации.

Answer 3

Мне поручено воссоздать этот Java-апплет с использованием JavaScript (должен быть совместим с планшетами и работать во всех современных браузерах> IE8).Я создаю изображения, используя: var image1 = new Image();, а затем устанавливаю источник: img.src = "some path";

Итак, из pepkin88 я вижу, что следующая функция будет смешивать два изображения путем объединения их данных массива пикселей,переопределение предыдущих данных из первого изображения новыми смешанными данными и, наконец, помещение новых данных на холст, в результате чего получается смешанное изображение:

window.onload = function () {
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = img1.width;
var height = img1.height;
canvas.width = width;
canvas.height = height;

var pixels = 4 * width * height;
context.drawImage(img1, 0, 0);
var image1 = context.getImageData(0, 0, width, height);
var imageData1 = image1.data;
context.drawImage(img2, 0, 0);
var image2 = context.getImageData(0, 0, width, height);
var imageData2 = image2.data;
while (pixels--) {
    imageData1[pixels] = imageData1[pixels] * 0.5 + imageData2[pixels] * 0.5;
}
image1.data = imageData1;
context.putImageData(image1, 0, 0); };

ОДНАКО, если вы просматривали Javaапплет, за который я отвечаю за воссоздание, вы видите, что смешивание происходит в режиме реального времени непрерывно, когда вы перетаскиваете изображение с помощью указателя, изображения постоянно смешиваются на основе их перекрывающихся областей.

ТАК, я 'Я пытаюсь изменить код, чтобы учесть это, и у меня постоянно есть x, y, позиции нарисованных изображений (на основе левого верхнего угла), и w, h всех изображений остается статичным:

следующие фрагменты не включают в себя все, что я делаю, только то, что я чувствую, важно, чтобы вы знали

//Rectangle Class from Java converted to JS
function Rectangle(x, y, width, height, src) {
        this.x   = x; 
        this.y   = y; 
        this.w   = width;
        this.h   = height;
        this.img = new Image();
        this.img.src = src;
    }

//Stores instance in rect array
rect[0] = new Rectangle(1, (height - 111)/2, 150, 105, "images/mMain.png");

//Draw method that's called
Rectangle.prototype.draw = function(ctx) {
        //this.checkBound();
        ctx.drawImage(this.img, this.x, this.y, this.w, this.h);
        prepareMix(this.img, this.x, this.y, this.w, this.h);
    }

Итак, я работаю надФункция prepareMix, которая получает информацию об изображении и использует ее для получения и хранения данных изображения:

 function prepareMix(src, x, y, w, h) {

        pixels = 4 * w * h;
        var image = mtx.getImageData(x, y, w, h);
        var imgData = image.data; 
    }

Составляет список действий, которые необходимо выполнить:

1. Ощутите перекрытие
2. Получить и сохранить данные перекрывающегося изображения
3. Смешать массивы данных перекрывающейся области
4. Заменить данные перекрывающегося изображения смешанными данными
5. Поместить новые данные на холст

1.Почувствуйте перекрытие:

План: Сохраните положения изображения и сравните данные о положении, чтобы узнать, происходит ли перекрытие.Если перекрытие - это ИСТИНА, для каких двух изображений это правда?Различают эти изображения, которые перекрываются с другими изображениями, чтобы к ним можно было вызывать методы.

js, css, html и изображения в формате zip здесь BOX