Смешивание двух ImageData в один ImageData со смещением в Javascript

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

Ниже приведен код Javascript, который имеет два ImageData

var redImage = copy.getImageData((SCREEN_WIDTH - VIDEO_WIDTH)/2,(SCREEN_HEIGHT - VIDEO_HEIGHT)/2,VIDEO_WIDTH,VIDEO_HEIGHT);
var bluImage = copy.getImageData((SCREEN_WIDTH - VIDEO_WIDTH)/2,(SCREEN_HEIGHT - VIDEO_HEIGHT)/2,VIDEO_WIDTH,VIDEO_HEIGHT);
var redData = redImage.data;
var blueData = blueImage.data;

// Colorize red
for(var i = 0; i < redData.length; i+=4) {
    redData[i] -= (redData[i] - 255);
}
redImage.data = redData;

// Draw the pixels onto the visible canvas
disp.putImageData(redImage,(SCREEN_WIDTH - VIDEO_WIDTH)/2 - 25,(SCREEN_HEIGHT - VIDEO_HEIGHT)/2);

// Colorize cyan
for(var i = 1; i < blueData.length; i+=4) {
    blueData[i] -= (blueData[i] - 255);
    blueData[i+1] -= (blueData[i+1] - 255);
}
blueImage.data = blueData;

// Draw the pixels onto the visible canvas
disp.putImageData(blueImage,(SCREEN_WIDTH - VIDEO_WIDTH)/2 + 25,(SCREEN_HEIGHT - VIDEO_HEIGHT)/2);

Как мне слить / смешать redData и blueData перед тем, как поместить их на холст?

Источник

3 ответа

Решение

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

newPixel = imageMainPixel * mixFactor + imageSecPixel * (1 - mixFactor)

Пример, предполагающий, что оба буфера имеют одинаковую длину:

var mixFactor = 0.5; //main image is dominant

//we're using the red buffer as main buffer for this example
for(var i = 0; i < redData.length; i+=4) {
    redData[i]   = redData[i]   * mixFactor + blueData[i]   * (1 - mixFactor);
    redData[i+1] = redData[i+1] * mixFactor + blueData[i+1] * (1 - mixFactor);
    redData[i+2] = redData[i+2] * mixFactor + blueData[i+2] * (1 - mixFactor);
}

Теперь ваш красный буфер содержит смешанное изображение.

Чтобы добавить смещение, вы можете просто перерисовать изображения со значением смещения, например:

var offset = 20; //pixels

copy.drawImage(originalImage, -offset, 0);  // <--
var redImage = copy.getImageData( /*...*/ );

copy.drawImage(originalImage, offset, 0);   // -->
var bluImage = copy.getImageData( /*...*/ );
Источник

Если у вас есть не толькоImageDataобъекты, но и источникcanvasэлементы, вы можете использовать этот метод.

Вы можете получить данные изображения в кодировке base64, вызвавtoDataURLметод холста. Тогда вы можете создатьImageэлемент из этих данных, а затем вставьте это изображение на холст назначения с помощьюdrawImage,

Пример кода:

function mergeImageData(callback, sources) {
    var canvas = document.createElement('canvas'),
        context,
        images = Array.prototype.slice.call(arguments, 1).map(function(canvas) {
                var img = new Image();
                img.onload = onLoad;
                img.src = canvas.toDataURL();
                return img;
            }
        ),
        imgCounter = 0,
        widths = [],
        heights = [];

    function onLoad() {
        widths.push(this.width);
        heights.push(this.height);

        if (++imgCounter == images.length) {
            merge();
        };
    };
    function merge() {
        canvas.width = Math.max.apply(null, widths);
        canvas.height = Math.max.apply(null, heights);
        context = canvas.getContext('2d');

        images.forEach(function(img) {
                context.drawImage(img, 0, 0, img.width, img.height);
            }
        );

        callback(context.getImageData(0, 0, canvas.width, canvas.height));
    };
};
Источник

А как насчет функций настройки формата передачи 3d - от полного формата бок о бок до анаглифа, чередующихся рядов, чередующихся столбцов, шахматной доски, оригинального бок о бок и 2d из 3d?

Источник
Другие вопросы по тегам