用html5画布添加图,用HTML5画布混合两个图像

要融合，您需要以50-50的比例融合两个图像。

让我们看看如何：

Blended image

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);

};