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

Ответ 1

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

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

Update: Простой пример с альфа-смешиванием 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>

Ответ 2

Я создал отдельную, легкую библиотеку с открытым исходным кодом для выполнения режимов смешивания в стиле Photoshop из одного контекста HTML Canvas в другой: 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.

Ответ 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-апплет, за который я отвечаю за воссоздание, вы видите, что смешивание происходит в режиме реального времени непрерывно, когда вы перемещаете изображение вокруг с указателем, что изображения постоянно смешиваются в зависимости от их перекрывающихся областей.

SO, я хочу изменить код для учетной записи для этого, и у меня постоянно есть 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 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);
    }

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

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

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

Сделал список того, что делать:

• Смысл совпадения
• Получить и сохранить данные перекрывающихся изображений
• Смешайте массивы данных перекрывающихся областей
• Заменить перекрывающиеся данные изображения смежными данными
• Поместите новые данные на холст

1. Смысл перекрытия:

План: Сохранять позиции изображения и сравнивать данные позиций, чтобы знать, происходит ли перекрытие. IF перекрытие имеет значение TRUE, для чего это два изображения? Различайте эти изображения, которые накладываются на другие изображения, чтобы на них можно было вызвать методы.

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