在javascript画布上混合两个图像

How do you blend two arrays of pixel data to create one image? with the option of using different blending modes?

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

3 个解决方案

#1

Pixastic is a special framework for advanced use of canvas, here are blending examples: http://www.pixastic.com/lib/docs/actions/blend/

Pixastic是一个高级使用canvas的特殊框架，下面是混合示例:http://www.pixastic.com/lib/docs/actions/blend/

If you would like do this alone, you can extract pixel data from 2 images, blend it with a mathematical equation, and put into a canvas. Here is information how to get and put pixel data from/to canvas: http://ajaxian.com/archives/canvas-image-data-optimization-tip

如果你想单独做这个，你可以从两个图像中提取像素数据，将它与一个数学方程混合，然后放入一个画布。以下是如何从/到画布获取和放置像素数据的信息:http://ajaxian.com/archives/canvas-image-data-optimization-tip

---

Update: Simple example with alpha blending of 2 images in proportion 50-50. (Images borrowed from http://www.pixastic.com/sample/Butterfly.jpg and http://www.pixastic.com/sample/Flower.jpg )

更新:简单的例子，用alpha混合2张图片，比例为50-50。(图片来自http://www.pixastic.com/sample/Butterfly.jpg和http://www.pixastic.com/sample/flow.g)

<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

I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage:

我已经创建了一个单独的、轻量级的开源库，用于在一个HTML画布上下文中执行photoshop风格的混合模式:上下文-blender。这里的示例用法:

// Might be an 'offscreen' canvas
var over  = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

See the README for more information.

有关更多信息，请参阅自述。

#3

I am tasked with recreating this java applet using JavaScript (must be tablet friendly, and work in all modern browsers > IE8). I am creating images using: var image1 = new Image(); and then setting source: img.src = "some path";

我的任务是使用JavaScript重新创建这个java applet(必须是对平板电脑友好的，并且在所有的现代浏览器中都可以使用> IE8)。我正在使用:var image1 = new Image()创建图像;然后设置源:img。src = "一些路径”;

So, from pepkin88 I see that the following function will blend two images by combining their pixel array data, overriding previous data from the first image with the new blended data, and finally putting the new data on the canvas resulting in a blended image:

因此，在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); };

HOWEVER, if you viewed the java applet that I'm responsible for recreating, you see that blending happens in real-time continuously as you drag the image around with the pointer the images are constantly blending based on their overlapped regions..

但是，如果您查看我负责创建的java applet，您就会看到，当您将图像拖到一个指针周围时，图像会不断地在它们的重叠区域中混合，从而实时地进行混合。

SO, I'm looking to modify the code to account for this, and I continually have the x, y, positions of images drawn (based on top left corner), and the w, h of all images stays static:

所以，我想修改代码来解释这个，我不断地有x, y，图像的位置(基于左上角)，和w，所有图像的h保持静态:

the following snippets don't include everything I'm doing, just what I sense is important for you to know

下面的片段不包括我正在做的所有事情，我的感觉对你来说很重要

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

So, I'm working on a prepareMix function that receives image info and uses it to get and store image data:

因此，我正在研究一个prepareMix函数，它接收图像信息并使用它来获取和存储图像数据:

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

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

Made a list of what to do:

列出要做的事情:

1. Sense the overlapping
2. 意义上的重叠
3. Get and Store the overlapping image data
4. 获取和存储重叠的图像数据
5. Mix the overlapping region data arrays
6. 混合重叠的区域数据数组
7. Replace the overlapping image data with the blended data
8. 将重叠的图像数据替换为混合数据
9. Put the new data on the canvas
10. 将新数据放在画布上

1. Sense the Overlapping:

Plan: Store image positions and compare positions data to know whether or not overlapping is occurring. IF overlapping is TRUE, which two images is it true for? Distinguish these images that're overlapping from other images so that methods can be called on them.

计划:存储图像位置并比较位置数据，以了解是否发生重叠。如果重叠是真的，那么哪两个图像是真的?区分这些图像与其他图像重叠，以便可以调用方法。

js, css, html, and images in zip here BOX

js, css, html，以及zip中的图片