使用 HTML5 画布混合两幅图像
javascriptweb developmentfront end scripts更新于 2024/5/16 15:56:00
要进行混合，您需要按 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>
