node canvas生成图片并保存

node canvas生成图片并保存
寒霜canvas可以将画布转为base64,而base64就是该图片的信息,但是node保存文件的时候需要buffer格式的信息,所以只需要将canvas转成的base64处理成buffer,就可以保存
总结如下:
1、将画布信息转为base64
2、处理base64为buffer,进行保存
1、引入canvas模块
const {createCanvas} = require('canvas')
2、canvas绘图
const canvas = createCanvas(200,200)
const ctx = canvas.getContext('2d')
ctx.font = '30px'
ctx.rotate(0.1)
ctx.fillText('Hello',50,100)
3、将画布信息转为base64
const dataURl = canvas.toDataURL('image/png')
4、处理base64为buffer
const base64Data = dataURl.replace(/^data:image\/\w+;base64,/, "");
const bufferData = new Buffer(base64Data,'base64')
5、保存buffer为图片格式
fs.writeFile('2.png',bufferData,function (err){
if (err){
console.log(err)
}else {
console.log('图片保存成功')
}
})
6、完整代码
const {createCanvas} = require('canvas')
const fs = require('fs')
const canvas = createCanvas(200,200)
const ctx = canvas.getContext('2d')
ctx.font = '30px'
ctx.rotate(0.1)
ctx.fillText('Hello',50,100)
const dataURl = canvas.toDataURL('image/png')
console.log(dataURl)
const base64Data = dataURl.replace(/^data:image\/\w+;base64,/, "");
console.log(base64Data)
const bufferData = new Buffer(base64Data,'base64')
fs.writeFile('2.png',bufferData,function (err){
if (err){
console.log(err)
}else {
console.log('图片保存成功')
}
})