node-canvas
上面這個鏈接有官方寫的一些基礎(chǔ)的使用方法和示例

官方api文檔
這個是詳細的畫圖的api文檔

因為是后端生成圖片，所以用node-canvas。
嗯雖然我還有點迷糊的地方，我們先安裝一下吧，看文檔是可以實現(xiàn)我需要的功能的

繪制圖片的部分官網(wǎng)的方法使用不了，所以我就找了前人的代碼。雖然有點老，但還是很有借鑒意義。
nodejs繪制生成圖像
源代碼

常用對照表
文件擴展名 和 Content-Type(Mime-Type)

下面是我基于egg框架寫的，其他框架大概改一下格式就行
pdf的在前面，圖片的在后面，異曲同工，為了不造成理解的困擾，把兩個分別粘出來

如果有任何問題也可以給我留言～ 下面代碼的分享者是agiamason哦～（也就是我啦）

繪制pdf的

代碼示例：

//繪制pdf
const path = require('path');
const { promisify } = require('util');
const fs = require('fs');//在網(wǎng)上查到的readFile同步方式
const readFile = promisify(fs.readFile);
const qr = require('qr-image'); //這個插件是用來畫二維碼的也很好用
const Canvas = require('canvas');

    const canvas = new Canvas(1158, 1012, 'pdf');
    const ctx = canvas.getContext('2d');

    // 繪制背景
    const filePath = path.join(__dirname, <你的圖片存放地址>);
    const background = await readFile(filePath);//載入圖片時也可以用其他的方式
    const backgroundImg = new Canvas.Image();
    backgroundImg.src = background;
    ctx.drawImage(backgroundImg, 0, 0, 1158, 1012);

    // 畫二維碼（這里多加了個畫二維碼的，希望能對你有用）
    const qrUrl = <這里是你二維碼上帶的信息>;
    const qrcode = qr.imageSync(qrUrl, { type: 'png', size: 4, margin: 1 });//可以修改size，margin等格式
    const qrcodeImg = new Canvas.Image();
    qrcodeImg.src = qrcode;
    //這里的位置分別是（開始位置x坐標，開始位置的y坐標，二維碼的寬，高）
    ctx.drawImage(qrcodeImg, 850, 420, 260, 260);

    // 生成最終pdf
    const data = canvas.toDataURL('application/pdf');
    // 去掉圖片base64碼前面部分data:image/png;base64
    const base64 = data.replace(/^data:image\/\w+;base64,/, '');
    const picBuffer = new Buffer(base64, 'base64'); // 把base64碼轉(zhuǎn)成buffer對象，
     this.ctx.set('Content-Type', 'application/pdf');
     this.ctx.body=picBuffer
//這時候請求接口就能收到畫好的pdf文件了

繪制png

//繪制png
const path = require('path');
const { promisify } = require('util');
const fs = require('fs');//在網(wǎng)上查到的readFile同步方式
const readFile = promisify(fs.readFile);
const qr = require('qr-image'); //這個插件是用來畫二維碼的也很好用
const Canvas = require('canvas');

    const canvas = new Canvas(寬, 高);
    const ctx = canvas.getContext('2d');

/*下面這部分和生成pdf的一模一樣，可以不用看
    // 繪制背景
    const filePath = path.join(__dirname, <你的圖片存放地址>);
    const background = await readFile(filePath);//載入圖片時也可以用其他的方式
    const backgroundImg = new Canvas.Image();
    backgroundImg.src = background;
    ctx.drawImage(backgroundImg, 0, 0, 1158, 1012);

    // 畫二維碼（這里多加了個畫二維碼的，希望能對你有用）
    const qrUrl = <這里是你二維碼上帶的信息>;
    const qrcode = qr.imageSync(qrUrl, { type: 'png', size: 4, margin: 1 });//可以修改size，margin等格式
    const qrcodeImg = new Canvas.Image();
    qrcodeImg.src = qrcode;
    //這里的位置分別是（開始位置x坐標，開始位置的y坐標，二維碼的寬，高）
    ctx.drawImage(qrcodeImg, 850, 420, 260, 260);

從這里開始不一樣了*/

    // 生成最終pdf
    const data = await promisify(canvas.toDataURL).call(canvas, 'image/jpeg');
        const base64 = data.replace(/^data:image\/\w+;base64,/, '');// 去掉圖片base64碼前面部分data:image/png;base64
        const picUrl = new Buffer(base64, 'base64'); // 把base64碼轉(zhuǎn)成buffer對象，
        this.ctx.set('Content-Type', 'image/jpeg');
        this.ctx.body = picUrl;
//這時候請求接口就能收到畫好的png文件了