前端实现图片合成

合并两张图片时，利用 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>

效果图

前端实现图片合成

逆风微笑的代码狗

引用和评论

探索Go Module：常用命令及其用途

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合