在javascript画布上混合两个图像 [英] blend two images on a javascript canvas

问题描述

如何混合两个像素数据阵列来创建一个图像？可以使用不同的混合模式？

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

推荐答案

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

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

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

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

更新：
简单的例子，比例为50-50的两个图像的alpha混合。
（从 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>

这篇关于在javascript画布上混合两个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！