HTML5 Canvas के साथ दो इमेजेज को ब्लेंड करना

ब्लेंड करने के लिए, आपको दो इमेजेज को 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>