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文件了