gpt4 book ai didi

javascript - 在 Javascript 中将两个 ImageData 混合成一个具有偏移量的 ImageData

转载 作者:行者123 更新时间:2023-11-28 20:26:41 24 4
gpt4 key购买 nike

我正在尝试将两个 ImageData 对象混合成一个对象,以获得类似于此 link 中显示的图片的结果。

以下是具有两个 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);

在将 redData 和 blueData 放在 Canvas 上之前如何合并/混合它?

最佳答案

可用于混合两个图像的公式相当简单:

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( /*...*/ );

关于javascript - 在 Javascript 中将两个 ImageData 混合成一个具有偏移量的 ImageData,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17253085/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com