使用Javascript中的偏移量将两个ImageData混合到一个ImageData中

我正在尝试将两个ImageData对象混合到一个对象中，以获得类似于图中所示的结果

下面是包含两个ImageData的Javascript代码

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

var redImage=copy.getImageData（（屏幕宽度-视频宽度）/2，（屏幕高度-视频高度）/2，视频宽度，视频高度）；
var bluImage=copy.getImageData（（屏幕宽度-视频宽度）/2，（屏幕高度-视频高度）/2，视频宽度，视频高度）；
var redData=redImage.data；
var blueData=blueImage.data；
//染红
对于（变量i=0；i

---

在将redData和blueData放在画布上之前，如何合并/混合它们？

可以用来混合两幅图像的公式非常简单：

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混合因子=0.5//主要形象占主导地位
//在本例中，我们使用红色缓冲区作为主缓冲区
对于（变量i=0；i

现在，红色缓冲区包含混合图像

要添加偏移，只需使用偏移值重新绘制图像，例如：

var offset = 20; //pixels

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

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

var偏移=20//像素
复制.drawImage（原始图像，-偏移量，0）；//
var bluImage=copy.getImageData（/*…*/）；

混合两幅图像的公式非常简单：

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混合因子=0.5//主要形象占主导地位
//在本例中，我们使用红色缓冲区作为主缓冲区
对于（变量i=0；i

现在，红色缓冲区包含混合图像

要添加偏移，只需使用偏移值重新绘制图像，例如：

var offset = 20; //pixels

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

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

var偏移=20//像素
复制.drawImage（原始图像，-偏移量，0）；//
var bluImage=copy.getImageData（/*…*/）；

设置传输格式3d的功能如何？从格式完全并排到立体图、交替行、交替列、棋盘、原始并排和2d从3d？

设置传输格式3d的功能如何？从格式完全并排到立体图、交替行，交替列、棋盘、并排原始和三维二维？

如果您不仅有

ImageData

对象，而且还有源

canvas

元素，则可以使用此方法

您可以通过调用

toDataURL

canvas方法来获取base64编码的图像数据。然后您可以从该数据创建

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));
    };
};

---

如果您不仅有

ImageData

对象，而且还有源

canvas

元素，则可以使用此方法

您可以通过调用

toDataURL

canvas方法来获取base64编码的图像数据。然后您可以从该数据创建

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));
    };
};

---

这将一对一地混合两幅图像，但我需要两幅图像之间有一个50像素的偏移量。我可以这样做吗（

var mixFactor=0.5；//主图像占主导地位//我们在这个示例中使用红色缓冲区作为主缓冲区（var i=0；i

）@Vidhuran将相同的图像与偏移量差混合不会得到3D效果。你需要拍摄两张有轻微偏移的图像（通常相距5-7厘米，镜头指向同一方向）。当你混合这两个图像时，你会得到一个3D效果。除非3D不是你想要的。。？在这种情况下，您只需使用

ctx.drawImage（画布，偏移量，0）

在混合它们之前，将它们放在同一画布上。至少根据我在问题中发布的链接，通过将同一图像与偏移合并，可以实现轻微的“弹出”/“弹出”效果。@Vidhuran请参阅有关如何添加偏移的更新示例。@ken abdias软件谢谢，但我相信我不能使用drawImage，因为我使用的是ImageData。我得到了这个错误

TypeError:Value无法转换为任何一个：HTMLImageElement、htmlCanvaElement、HTMLVideoElement。

但是根据你的回答，我能够合并两个图像以获得所需的输出。这将一对一地混合两个图像，但我需要两个图像之间的偏移量，比如说50像素。我可以这样做吗（

var mixFactor=0.5；//主图像占主导地位//我们在这个示例中使用红色缓冲区作为主缓冲区（var i=0；i

）@Vidhuran将相同的图像与偏移量差混合不会得到3D效果。你需要用一个轻微的“o”来拍摄两张照片