Trộn hai hình ảnh với HTML5 canvas

Để trộn (blend), bạn cần thực hiện trộn hai hình ảnh theo tỷ lệ 50-50.

Cách thực hiện:

<img src="Tutorial1.jpg" id="myImg1">
<img src="Tutorial2.jpg" id="myImg2">
<p>Blended image<br>
<canvas id="canvas"></canvas></p>
<script>
  window.onload = function() {
    var myImg1 = document.getElementById('myImg1');
    var myImg2 = document.getElementById('myImg2');
    var myCanvas = document.getElementById("canvas");
    var ctx = myCanvas.getContext("2d");
    var w = myImg1.width;
    var h = myImg1.height;
    myCanvas.width = w;
    myCanvas.height = h;
    var pixels = 4 * w * h;
    ctx.drawImage(myImg1, 0, 0);
    var image1 = ctx.getImageData(0, 0, w, h);
    var imageData1 = image1.data;
    ctx.drawImage(myImg2, 0, 0);
    var image2 = ctx.getImageData(0, 0, w, h);
    var imageData2 = image2.data;
    while(pixels--) {
      imageData1[pixels] = imageData1[pixels] * 0.5 + imageData2[pixels] * 0.5;
    }
    image1.data = imageData1;
    ctx.putImageData(image1, 0, 0);
  };
</script>