自定义参数二维码图片结合背景图片生成新图片 node环境

场景：微信用户通过小程序点击分享；生成分享二维码图片包含分享用户的openid；

分析：二维码好办直接利用 qrcode 库，图片合并需要特定的依赖软件

环境搭建：MAC环境下，直接通过

brew install imagemagick

安装时，需要当前终端翻墙，此过程需要10分钟左右。Windows 可直接去https://imagemagick.org/index.php 下载对应的Windows 安装版本

代码如下：index.js

const fs = require('fs'); ///引入文件系统模块
const gm = require('gm').subClass({ imageMagick: true });
const qrcode = require('qrcode')
/**
 * 程序运行环境中要事先安装 imagemagick 或者 graphicsmagick
 * 此处使用 imagemagick
 * 参考 https://www.npmjs.com/package/gm
 */
/**
 * 用微信用户的open_id生成分享的图片
 * @param {*} open_id  微信用户的open_id
 * @returns 
 */
async function getShareImgWithOpenId(open_id = null) {
    if (!open_id) { return { code: -1, mess: 'open_id不存在' } }
    open_id = open_id + '_' + new Date().getTime() ///加上时间戳，防止出现一人多次触发的情况
    const bg_width = 500;///背景宽
    const bg_height = 750;///背景高
    const qr_width = 150;///二维码生成的固定尺寸
    const x_start_point = (bg_width - qr_width) / 2;///二维码x轴起始点
    const qr_position_x = x_start_point + 5;///二维码实际摆放的x轴位置；背景图片二维码预留的空白区域不在正中心
    const qr_position_y = 386;///二维码实际摆放的y轴位置；
    const register_url = 'https://www.test.com/register';///注册网络地址
    const qrcode_show_value = `${register_url}?p=${open_id}`;///二维码实际内容 如: 'https://www.test.com/register?p=xxxxx_1628770240895
    const bg_source = `${__dirname}/assets/bg.jpg`;///背景图片地址
    const temp_qrcode_source = `${__dirname}/temp_qrcode_${open_id}.png`;///临时二维码图片地址
    const share_img_source = `${__dirname}/share_img_${open_id}.png`;///分享图片地址
    await qrcode.toFile(temp_qrcode_source, qrcode_show_value, {
        margin: 0,
        width: qr_width
    })///本地临时生成二维码图片
    return new Promise((resolve, reject) => {
        gm().in('-page', '0,0')///-page 是设置图片位置
            .in('-resize', `${bg_width}x${bg_height}`)///-resize 是设置（等比缩放）
            .in(bg_source)///背景图
            .in('-page', `+${qr_position_x}+${qr_position_y}`)///设置二维码图片的位置
            .in(temp_qrcode_source)///临时二维码图
            .mosaic()///图片合成
            .write(share_img_source, function (err) {///图片写入
                fs.unlinkSync(temp_qrcode_source);///直接删除对应的临时二维码图片
                if (err) {
                    reject({ code: -1, mess: err })
                } else {
                    resolve({ code: 0, img_source: share_img_source })
                }
            });
    })
}

async function start() {
    let current_user_open_id = 'asdhjlqiwherakhsdkajhdoqlhwedlk'///用户open_id
    let result = await getShareImgWithOpenId(current_user_open_id)
    if (result.code === 0) {
        console.log('分享图片:', result.img_source)
        ///分享操作完成后，删除该张图片；这里假设10秒后
        setTimeout(() => {
            fs.unlinkSync(result.img_source);
            console.log('已删除:' + result.img_source)
        }, 10 * 1000);
    } else {
        console.log('操作失败:', result.mess)
    }
}

start();

项目结构：

步骤：

1，运行的环境中要安装 imagemagick 软件

2，初始化 node 项目

3，npm install gm

      npm install qrcode

4，执行：node index.js

效果：

原图：

合成：

 总结：本地MAC环境可以正常运行；如Windows无法运行，请检查环境变量的配置。如后续需要布置在Linux服务器环境上，需要下载对应版本的imagemagick软件；https://imagemagick.org/index.php