node-canvas模块使用

最新推荐文章于 2024-08-02 21:54:59 发布

wengye1990

最新推荐文章于 2024-08-02 21:54:59 发布

阅读量2.7w

点赞数 2

文章标签： node canvas echarts 服务器

本文链接：https://blog.csdn.net/wengye1990/article/details/71120743

版权

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

1. node-canvas安装

安装方式与npm包一致：

npm install canvas // or yarn add canvas

但是，node-canvas包依赖于Cairo等，需要先在系统中安装相关依赖。

OS	Command
OS X	brew install pkg-config cairo libpng jpeg giflib
Ubuntu	sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
Fedora	sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel
Solaris	pkgin install cairo pkg-config xproto renderproto kbproto xextproto

对于El Capitan用户而言，在安装相关依赖时可能会出错，还需要执行xcode-select --install。同时，使用brew安装时，会提示/usr/local/var无权限创建的问题，可以通过如下命令解决：

mkdir /usr/local/var
sudo chmod -R 777 /usr/local/var

Linux下安装时可能会出现由于gcc、g++版本过低而无法编译node-canvas的问题，此时需要升级gcc、g++，升级办法详见此处。GCC中国镜像可以使用中科院镜像。

2. Echarts生成图片

首先，需要安装Echarts包：

npm install echarts // or yarn add echarts

由于node-canvas默认不支持中文字体，所以需要导入中文字体文件，以华文仿宋为例，下载对应的ttf文件至项目目录，以便后续导入canvas。

由于项目后台使用Egg.js框架，所以通过extend的方式扩展application，相应代码如下：

// app/extend/application.js
'use strict';

const path = require('path');
const Canvas = require('canvas');
const echarts = require('echarts');
const fs = require('fs');

module.exports = {
  generateImage (options, savePath, size) {
    return new Promise((resolve, reject) => {
      const canvas = new Canvas(parseInt(size.width,10), parseInt(size.height,10));
      const font = new Canvas.Font('华文仿宋', path.join(__dirname, '华文仿宋.ttf'));
      const ctx = canvas.getContext('2d');
      ctx.addFont(font);
      ctx.font = '12px 华文仿宋';

      echarts.setCanvasCreator(function () {
        return canvas;
      });
      const chart = echarts.init(canvas);
      options.animation = false;
      options.textStyle = {
        fontFamily: '华文仿宋',
        fontSize: 12,
      };
      chart.setOption(options);
      try {
        fs.writeFileSync(savePath, chart.getDom().toBuffer());
        console.log("Create Img:" + savePath);
      } catch (err){
        console.error("Error: Write File failed" + err.message);
      }
      resolve();
    })
  }
}