nodejs带图标的二维码

前言

实现用nodejs生成二维码

一、生成二维码

先下载qrcode模块，可以使用npm install --save qrcode

/**
    @params text 文本数据
    @params callback 回调函数
*/
var getQrcode = function(text, callback){
    const options = {
      width: 256,
      height: 256,
      margin: 1 
    };
    let dt = new Date();
    let name = dt.getTime()+'.png';
    //保存本地
    qrcode.toFile(path.resolve(__dirname+'./../dist/qrcode/'+name), text, options, function (err) {
        if (err) throw err;
        if(callback){
            callback(name);
        }
    });
}

二、带图标的二维码

要带图标一般的步骤是，生成二维码+已有的图标，再用sharp或jimp进行缩放合并。

1.这里先使用sharp进行处理，npm install --save sharp

var getQrcodeIcon = function(text, logoName, callback){
        let fpath = '';
        getQrcode(text,function(data){
            fpath = path.resolve(__dirname,'./../dist/uploads/'+data);
            const logo = path.resolve(__dirname, './../dist/uploads/'+logoName);
            let dt = new Date();
            let targetPath = path.resolve(__dirname,"./../dist/uploads/qrcode"+dt.getTime()+'.png');
            mergerCntImg(fpath, logo, targetPath);
            if(callback){
                callback(targetPath);
            }
        });
    }

    /**
     * 合并中间的logo
     * @param oriImg 原始图片
     * @param waterImg logo的水印图片
     * @param targetImg 目标文件
     * @param ratio 合成的比列
     * @returns {Promise<void>}
    */
    var mergerCntImg = async (oriImg, waterImg, targetImg, ratio = 5) => {
        //转化成sharp对象
        const [ori, water] = await Promise.all([sharp(oriImg), sharp(waterImg)])
        // 通过比例进行合成
        const oriHeight = await ori.metadata();
        const waterHeight = Math.ceil(oriHeight.height / ratio);
        const waterWidth = Math.ceil(oriHeight.width / ratio);
        const waterBuffer = await water.resize(waterWidth, waterHeight).toBuffer();
        // 合并图片的图片大小需要转成buffer，不能直接使用sharp对象，不然sharp也会报错
        await ori.composite([{input: waterBuffer}]).toFile(targetImg)
    } 

2.使用jimp处理, 下载npm install --save jimp

var mergerCntImg = function(oriImg, waterImg, targetImg){
        jimp.read(oriImg, (err, first_img) => {
            if(err) {
                console.log(err);
            } else {
                jimp.read(waterImg, (err, second_img) => {
                    if(err) {
                        console.log(err);
                    } else {
                        let logoW = first_img.bitmap.width/5;
                        let logoH = first_img.bitmap.height/5;
                        let x = (first_img.bitmap.width - logoW)/2;
                        let y = (first_img.bitmap.height - logoW)/2;
                        first_img.resize(first_img.bitmap.width, first_img.bitmap.height);
                        second_img.resize(logoW, logoH);
                        first_img.blit(second_img, x, y);
                        first_img.write(targetImg);
                    }
                })
            }
        });
    }

三、一些问题

下载问题

npm 一般镜像源在国外
cnpm淘宝开发的（速度快，坑很大），主要没有版本控制，而且下载都是软链接，无法复制node_module文件夹
pnpm未知，存在问题比cnpm更多

node开发版本跟发布版本尽量版本一致
windows开发的node_modules跟 linux的node_modules可能存在不一样，特别是一些内置c、python等代码的模块
所以需要package.json和package-lock.json的文件，然后项目部署(不复制node_modules文件夹) 后重新npm install

最新的sharp版本对nodejs版本要求比较新。 下载sharp@0.28.3问题，这里是由于下载libvips-8.10.6-win32-x64.tar.br 会超时。

    npm WARN cleanup Failed to remove some directories [
    npm WARN cleanup   [
    npm WARN cleanup     'D:\\workspace\\node-project\\tour-pro\\node_modules\\color',
    npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'D:\workspace\node-project\tour-pro\node_modules\color\node_modules'] {
    npm WARN cleanup       errno: -4048,
    npm WARN cleanup       code: 'EPERM',
    npm WARN cleanup       syscall: 'rmdir',
    npm WARN cleanup       path: 'D:\\workspace\\node-project\\tour-pro\\node_modules\\color\\node_modules'
    npm WARN cleanup     }
    npm WARN cleanup   ],
    npm WARN cleanup   [
    npm WARN cleanup     'D:\\workspace\\node-project\\tour-pro\\node_modules\\sharp',
    npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'D:\workspace\node-project\tour-pro\node_modules\sharp\src\libvips'] {
    npm WARN cleanup       errno: -4048,
    npm WARN cleanup       code: 'EPERM',
    npm WARN cleanup       syscall: 'rmdir',
    npm WARN cleanup       path: 'D:\\workspace\\node-project\\tour-pro\\node_modules\\sharp\\src\\libvips'
    npm WARN cleanup     }
    npm WARN cleanup   ]
    npm WARN cleanup ]
    npm ERR! code 1
    npm ERR! path D:\workspace\node-project\tour-pro\node_modules\sharp
    npm ERR! command failed
    npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
    npm ERR! sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.10.6/libvips-8.10.6-win32-x64.tar.br
    npm ERR! sharp: Please see https://sharp.pixelplumbing.com/install for required dependencies
    npm ERR! sharp: Installation error: connect ETIMEDOUT 20.205.243.166:443
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-01-25T11_35_48_467Z-debug-0.log
    解决方式，找镜像下载相关文件。放到缓存中C:\Users\{用户名}\AppData\Local\npm-cache\_libvips 文件夹下
    https://registry.npmmirror.com/binary.html?path=sharp-libvips/v8.10.6/libvips-8.10.6-win32-x64.tar.br
    https://registry.npmmirror.com/binary.html?path=sharp-libvips/v8.10.6/libvips-8.10.6-linux-x64.tar.br

参考

https://pythonjishu.com/jnchrlmcwzjrhzc/ 　　#nodejs动态创建二维码的方法
https://ipkd.cn/webs_2547.html　　　　　　 #前端如何利用nodejs生成二维码
https://www.coder.work/article/7648385　　 #node.js - 如何在中心生成 QR 码和图像，html+js
https://blog.csdn.net/limmt2020/article/details/120291366　　 #node.js将图片base64解码保存在服务器
https://blog.csdn.net/qq_41499782/article/details/112003772 　　#node生成带logo的二维码的中间件
https://blog.csdn.net/sufubo/article/details/126591609　　 #nodejs处理图片工具sharp
https://www.jianshu.com/p/03c37476334b　　 #libvips下载失败导致npm安装sharp失败