node-canvas

730 阅读2分钟

node-canvas

node-canvas是Node.js的Cairo支持的Canvas实现。 node-canvas模块是在node中实现canvas渲染的一种方式。可结合Echarts等应用于服务端生成图片流,进行图片处理等,如导出word或pdf时根据数据动态生成图片并嵌入文档中。下面将以Echarts为例,由服务端生成图片。

Cairo是一个2D图形库,支持多种输出设备。 支持的输出目标包括X Window,Quartz,Win32,image.buffers,PostScript,PDF和SVG文件输出。 后续支持OpenGL,XCB,BeOS,OS/2操作系统和DirectFB。 Cairo的目的是同一输出在不同的输出媒体上,同时能利用硬件加速器。 主要优点:在X、Win32、Quartz的基础上统一了图形库的操作方式,同时支持PS、PDF、SVG、PNG/JPEG等图像格式的输出,方便页面的再次利用,在glitz的支持下支持部分3D效果。 许可协议:GNU Lesser GeneralPublic License (LGPL) version 2.1 或者 the Mozilla Public License (MPL)version 1.1

使用node-canvas,渲染出一副图片

// 创建一个项目
npm init
yarn add canvas

// 创建index.js
const { createCanvas, loadImage } = require('canvas')
const fs = require('fs')
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')

// Write "Awesome!"
ctx.font = '30px Impact'
ctx.rotate(0.1)
ctx.fillText('Awesome!', 50, 100)

// Draw line under text
var text = ctx.measureText('Awesome!')
ctx.strokeStyle = 'rgba(0,0,0,0.5)'
ctx.beginPath()
ctx.lineTo(50, 102)
ctx.lineTo(50 + text.width, 102)
ctx.stroke()
const buffer = canvas.toBuffer('image/png')
fs.writeFileSync('./image.png',buffer)
console.log('<img src="' + canvas.toDataURL() + '" />')

// 运行node index.js
生成image.png文件
在控制台中打印出
<img src="data:image/png;base64,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" /> 
放到html文件中可用

node-gyp是用来编译C++模块的,比较新的node自带node-gyp

由于node程序中需要调用一些其他语言编写的工具甚至是dll,需要先编译一下,否则就会有跨平台的问题,例如在windows上运行的软件copy到mac上就不能用了,但是如果源码支持,编译一下,在mac上还是可以用的 长久以来 linux 的二进制分发一直是巨坑,npm 为了方便干脆就直接源码分发,用户装的时候再现场编译。下载那几个模块的时候node-gyp会编译那些模块,这里node-gyp会自动编译canvas生成平台(windows)可用的文件 在node_modules/canvas/build中,如果没有node-gyp就无法编出build文件,无法使用canvas模块