合并两张图片时，利用 HTML5 中的 Canvas 技术进行操作。这种方法涉及创建一个画布（Canvas），将两张图片叠加在一起。
首先，你需要创建一个画布，然后在画布上绘制第一张图片。接着，在第一张图的基础上指定位置绘制第二张图片。这样就形成了三层结构：底层是画布，中间层是第一张图片，上层是第二张图片。确保第二张图片尺寸小于第一张图片，这样它不会完全遮盖中间层的图。
素材图片
html代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>合成海报-demo</title>
</head>
<body>
<div>
<img id="qrcode" src="./img/qrcode.png" alt="二维码">
<img id="poster" src="./img/poster.png" alt="海报模板">
<img id="qrPoster" alt="合成海报">
</div>
<button onclick="drawPosterImage()">合成海报</button>
</body>
</html>
<script>
const qrcodeHTML = document.getElementById('qrcode');
const posterHTML = document.getElementById('poster');
/**
* 获取图片
* @param imageHTML{HTMLElement} 对应的图片Html
* @return {Promise<unknown>}
*/
function readImage(imageHTML) {
return new Promise(resolve => {
const Image = new Image();
Image.src = imageHTML.getAttribute('src');
Image.crossOrigin = 'Anonymous';
Image.onload = function () {
resolve(Image);
};
});
}
const drawPosterImage = async function () {
const canvas = document.createElement('canvas');
// 海报模板的宽高
const posterW = canvas.width = posterHTML.offsetWidth;
const posterH = canvas.height = posterHTML.offsetHeight;
posterHTML.clientHeight
// 获取了一个 2D 渲染上下文，用于在 canvas 元素上进行绘图操作。
const context = canvas.getContext('2d');
// 使用 rect() 方法绘制一个矩形
context.rect(0, 0, canvas.width, canvas.height);
// 设置了矩形的填充颜色为白色
context.fillStyle = '#fff';
// 使用fill()方法填充矩形，将矩形以指定的颜色进行填充
context.fill();
// 获取#poster图片
const image2 = await readImage(posterHTML);
context.drawImage(image2, 0, 0, posterW, posterH);
// 获取#qrcode图片
const image1 = await readImage(qrcodeHTML);
context.drawImage(image1, 162, 481, 80, 80); // qrcode定位,根据需求修改
// 获取canvas base64的图片流
const base64 = canvas.toDataURL('image/png');
document.getElementById('qrPoster').setAttribute('src', base64);
};
</script>
</code></pre><p><strong>效果图</strong></p><p></p>
