node-canvas
上面这个链接有官方写的一些基础的使用方法和示例
官方api文档
这个是详细的画图的api文档
因为是后端生成图片，所以用node-canvas。
嗯虽然我还有点迷糊的地方，我们先安装一下吧，看文档是可以实现我需要的功能的
绘制图片的部分官网的方法使用不了，所以我就找了前人的代码。虽然有点老，但还是很有借鉴意义。
nodejs绘制生成图像
源代码
常用对照表
文件扩展名 和 Content-Type(Mime-Type)
下面是我基于egg框架写的，其他框架大概改一下格式就行
pdf的在前面，图片的在后面，异曲同工，为了不造成理解的困扰，把两个分别粘出来
如果有任何问题也可以给我留言～ 下面代码的分享者是agiamason哦～（也就是我啦）
绘制pdf的
代码示例：
//绘制pdf
const path = require('path');
const { promisify } = require('util');
const fs = require('fs');//在网上查到的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码转成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');//在网上查到的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码转成buffer对象，
this.ctx.set('Content-Type', 'image/jpeg');
this.ctx.body = picUrl;
//这时候请求接口就能收到画好的png文件了
网友评论