在 javascript 画布上混合两个图像

Question

如何混合两个像素数据数组来创建一张图像？是否可以选择使用不同的混合模式？

Answer 1

Pixastic 是一个用于高级使用画布的特殊框架，这里是混合示例：http://www.pixastic.com/lib/docs/actions/blend/

如果您想单独执行此操作，可以从 2 张图像中提取像素数据，将其与数学方程式混合，然后放入画布中。以下是如何从/向画布获取和放置像素数据的信息： http://ajaxian.com/archives/canvas-image-data-optimization-tip

---

更新： 以 50-50 的比例混合 2 张图像的简单示例。 （图片借自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

我创建了一个单独的、轻量级的开源库，用于从一个 HTML Canvas 上下文到另一个执行 Photoshop 风格的混合模式：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

我的任务是使用 JavaScript 重新创建 this java 小程序（必须对平板电脑友好，并且可以在所有现代浏览器 > 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 保持静态：

下面的 sn-ps 不包括我正在做的所有事情，只是我觉得你知道的很重要

//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