在javascript画布上混合两个图像

Question

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

Answer 1

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

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

更新: 使用按比例50-50的2个图像进行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>