js多张图片合成
时间: 2023-08-06 21:15:05 浏览: 45
要将多张图片合成,你可以使用 HTML5 的 Canvas 元素和 JavaScript 来实现。
以下是一个简单的示例代码,它将两张图片合成到一个新的画布上:
```html
<!DOCTYPE html>
<html>
<head>
<title>Image Composition</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img1 = new Image();
img1.src = "image1.jpg";
img1.onload = function() {
ctx.drawImage(img1, 0, 0);
};
var img2 = new Image();
img2.src = "image2.jpg";
img2.onload = function() {
ctx.drawImage(img2, 0, 0);
};
</script>
</body>
</html>
```
在这个代码中,我们首先创建了一个画布元素,然后获取了它的 2D 上下文对象。接着,我们创建了两个图片对象,分别加载了两张图片。在每个图片对象的 onload 事件中,我们使用 drawImage 方法将图片绘制到画布上。
你可以根据自己的需求调整图片的位置和大小,也可以绘制更多的图片。最终,你可以将这个画布保存为一个新的图片文件,以实现多张图片的合成。