1. 程式人生 > >Node.js在指定的圖片模板上生成二維碼圖片並附帶底部文字說明

Node.js在指定的圖片模板上生成二維碼圖片並附帶底部文字說明

  在Node.js中,我們可以通過qr-image包直接在後臺生成二維碼圖片,使用方法很簡單:

var qr = require('qr-image');
exports.createQRImage = function(res, str){
    var img = qr.image(str); // 將生成二維碼圖片
    res.writeHead(200, {'Content-Type': 'image/png'});
    img.pipe(res);
};

  但是如果我們希望生成的不僅僅是二維碼,而是在一張給定的背景圖上生成二維碼,並在底部配上相應的文字說明,那麼就需要藉助於其它一些包來實現。

  • images包是Node.js上一個輕量級的跨平臺影象處理庫,可以用來進行圖片的編輯和繪製。
  • svg2png用來將生成的svg轉換成png圖片。
  • text-to-svg用來將給定的文字轉換成對應的svg。

  下面是對應的實現程式碼:

exports.genQrImage = function (text, url) {
    const tts = textToSVG.loadSync(path.join(__dirname, '../../msyh.ttf'));
    const tSvg = tts.getSVG(text, {
        x: 
0, y: 0, fontSize: 20, anchor: 'top' }); const margin = 35; // 二維碼的左右邊距 const top = 90; // 二維碼距頂部的距離 var sourceImage = images(path.join(__dirname, '../../source.png')); var w = sourceImage.width(); // 模板圖片的寬度 return svg2png(tSvg) .then((rst) => {
var textImage = images(rst); var qrImage = images(qr.imageSync(url, {type: 'png'})).size(w - margin * 2); // 二維碼的尺寸為:模板圖片的寬度減去左右邊距 return sourceImage .draw(qrImage, margin, top) // 二維碼的位置:x=左邊距,y=top .draw(textImage, (w - textImage.width()) / 2, top + qrImage.height() + 10) // 底部文字,x為居中顯示,y=top+二維碼的高度+10 .encode('png', {quality: 90}); }) .catch(e => console.error(e)); };

  函式genQrImage接收兩個引數,text是顯示在二維碼底部的文字,url是要生成的二維碼地址。其中的source.png是給定的背景圖片,msyh.ttf是微軟雅黑的字型檔案。基本思路就是通過images庫載入一張預先指定的背景圖片,然後通過計算出的起始點座標在背景圖上畫出二維碼圖片和文字。最後通過encode方法將畫好的圖片輸出到buffer中,當然也可以通過save方法儲存到伺服器上。具體使用方法可以檢視github上的文件。

myShareQrImage: function* (next) {
    var _text = "聯絡人:xxx     手機號:13200000000";
    var _url = "http://www.cnblogs.com/jaxu";
    var _buffer = yield BizUtils.genQrImage(_text, _url);
    this.res.setHeader('Content-type', 'image/png');
    this.body = _buffer;
    yield next;
}

  最終生成的效果: