HTML5 캔버스로 두 이미지 혼합

블렌딩하려면 50-50의 비율로 두 이미지를 블렌딩해야 합니다.

방법을 알아보겠습니다.

<img src="Tutorial1.jpg" id="Tutorial One">
<img src="Tutorial2.jpg" id="Tutorial Two">

<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 = canvas.getContext("2d");

      // width and height
      var w = img1.width;
      var h = img1.height;

      myCanvas.width = w;
      myCanvas.height = h;

      var pixels = 4 * w * h;
      ctx.drawImage(myImg1, 0, 0);

      var image1 = context.getImageData(0, 0, w, h);
      var imageData1 = image1.data;
      ctx.drawImage(myImg2, 0, 0);

      var image2 = context.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>