首先，我们需要创建一个基础的HTML文件，并在其中添加一个canvas标签和两个img标签，用来实现两张图片的显示和合并。
<!DOCTYPE html>
<html>
<head>
<title>JS+Canvas实现图片合并</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas"></canvas>
<img id="image1" src="image1.jpg">
<img id="image2" src="image2.jpg">
<script src="script.js"></script>
</body>
</html>
接下来，我们需要在JavaScript中定义一个函数，完成图片的加载和合并。首先，使用JavaScript的canvas API创建一个画布，并将其宽度和高度设置为两张图片的宽度和高度之和。之后，使用canvas的drawImage()方法将两张图片绘制到画布上，最后使用canvas的toDataURL()方法将合并后的图片转换为base64编码的字符串并显示到网页上。
window.onload = function() {
// 创建画布
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image1 = document.getElementById('image1');
var image2 = document.getElementById('image2');
// 确定画布大小
var width = image1.width + image2.width;
var height = Math.max(image1.height, image2.height);
canvas.width = width;
canvas.height = height;
// 加载图片并绘制到画布上
ctx.drawImage(image1, 0, 0);
ctx.drawImage(image2, image1.width, 0);
// 转换为base64编码的字符串并显示到网页上
var dataURL = canvas.toDataURL();
document.getElementById('mergedImage').src = dataURL;
}
最后，在HTML中添加一个img标签用来显示合并后的图片：
<!DOCTYPE html>
<html>
<head>
<title>JS+Canvas实现图片合并</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas"></canvas>
<img id="image1" src="image1.jpg">
<img id="image2" src="image2.jpg">
<img id="mergedImage">
<script src="script.js"></script>
</body>
</html>
现在，当打开HTML文件时，两张图片将会被合并成一张图片并显示在网页上。
下面是一个完整的示例：https://codepen.io/julyspeed/pen/YzNBGKy
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js+canvas实现两张图片合并成一张图片的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 