用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");
//宽度和高度
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>