Custom parameter QR code picture combined with background picture to generate new picture node environment

scene ： Wechat users click to share through the applet ; Generate a shared QR code image, including the shared user's openid;

analysis ： The QR code is easy to use qrcode library , Image merging requires specific dependent software

Environment building ：MAC In the environment , Directly through

brew install imagemagick

When installing , The current terminal needs to climb the wall , This process requires 10 About minutes .Windows You can go straight to https://imagemagick.org/index.php  Download the corresponding Windows Installed version

The code is as follows ：index.js

const fs = require('fs'); /// Introduce the file system module 
const gm = require('gm').subClass({ imageMagick: true });
const qrcode = require('qrcode')
/**
 *  The program running environment should be installed in advance  imagemagick  perhaps  graphicsmagick
 *  Use here  imagemagick
 *  Reference resources  https://www.npmjs.com/package/gm
 */
/**
 *  Using wechat users' open_id Generate shared pictures 
 * @param {*} open_id   Of wechat users open_id
 * @returns 
 */
async function getShareImgWithOpenId(open_id = null) {
    if (!open_id) { return { code: -1, mess: 'open_id non-existent ' } }
    open_id = open_id + '_' + new Date().getTime() /// Add a time stamp , Prevent one person from triggering multiple times 
    const bg_width = 500;/// Background width 
    const bg_height = 750;/// The background is high 
    const qr_width = 150;/// Fixed size generated by QR code 
    const x_start_point = (bg_width - qr_width) / 2;/// QR code x Axis starting point 
    const qr_position_x = x_start_point + 5;/// The QR code is actually placed x Axis position ; The blank area reserved for the background picture QR code is not in the center 
    const qr_position_y = 386;/// The QR code is actually placed y Axis position ;
    const register_url = 'https://www.test.com/register';/// Register network address 
    const qrcode_show_value = `${register_url}?p=${open_id}`;/// The actual content of the QR code   Such as : 'https://www.test.com/register?p=xxxxx_1628770240895
    const bg_source = `${__dirname}/assets/bg.jpg`;/// Background image address 
    const temp_qrcode_source = `${__dirname}/temp_qrcode_${open_id}.png`;/// Temporary QR code picture address 
    const share_img_source = `${__dirname}/share_img_${open_id}.png`;/// Share picture address 
    await qrcode.toFile(temp_qrcode_source, qrcode_show_value, {
        margin: 0,
        width: qr_width
    })/// Temporarily generate QR code pictures locally 
    return new Promise((resolve, reject) => {
        gm().in('-page', '0,0')///-page  Is to set the picture position 
            .in('-resize', `${bg_width}x${bg_height}`)///-resize  It's settings （ Scale proportionally ）
            .in(bg_source)/// Background map 
            .in('-page', `+${qr_position_x}+${qr_position_y}`)/// Set the position of the QR code picture 
            .in(temp_qrcode_source)/// Temporary QR code diagram 
            .mosaic()/// Picture synthesis 
            .write(share_img_source, function (err) {/// Picture writing 
                fs.unlinkSync(temp_qrcode_source);/// Directly delete the corresponding temporary QR code picture 
                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'/// user open_id
    let result = await getShareImgWithOpenId(current_user_open_id)
    if (result.code === 0) {
        console.log(' Sharing pictures :', result.img_source)
        /// After the sharing operation is completed , Delete this picture ; It is assumed that 10 Seconds later 
        setTimeout(() => {
            fs.unlinkSync(result.img_source);
            console.log(' deleted :' + result.img_source)
        }, 10 * 1000);
    } else {
        console.log(' operation failed :', result.mess)
    }
}

start();

Project structure ：

step ：

1, Install in the running environment  imagemagick Software

2, initialization node project

3,npm install gm

      npm install qrcode

4, perform ：node index.js

effect ：

Original picture ：

synthesis ：

  summary ： Local MAC The environment works ; Such as Windows Unable to run , Please check the configuration of environment variables . If it needs to be arranged in the future Linux On the server environment , You need to download the corresponding version of imagemagick Software ;https://imagemagick.org/index.php