Ubuntu系统下用node canvas生产一张带文字的图片

790 阅读1分钟

这是笔记,纯粹记录, 在ubuntu下安装微软雅黑字体,然后使用node-canvas画一张带有中文字体的图片,并保存图, 下面是手把手的用例,亲测可以生成图片。

1. 初始化项目

mkdir test
cd test
npm init // 生成package.json
touch index.js // 新建一个文件
npm install canvas --save

2. 代码例子node-canvas文档

const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(400, 400)
const ctx = canvas.getContext('2d')
const fs = require('fs');
const path = require('path');

// Write "Awesome!"
ctx.font = '30px  "Microsoft YaHei" Impact'
ctx.rotate(0.1)
ctx.fillText('中文~Awesome!', 50, 120)

// 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 stream = canvas.createPNGStream();
const out = fs.createWriteStream(path.resolve('./', 'test.png'));
stream.pipe(out);
out.on('finish', () => console.log('The PNG file was created.'));
out.on('error', err => console.log('create write stream error!', err));

ubuntu安装字体

// 安装mkfontscale mkfontdir和fc-cache命令
sudo apt-get install ttf-mscorefonts-installer
sudo apt-get install fontconfig
cd /usr/share/fonts/
# 如果fonts/目录不存在,则创建
mkdir fonts
mkdir myfonts
cd /usr/share/fonts/
sudo chmod -R myfonts 777
# 到 windows 系统中去拷贝一份字体,一般说来,
# windows 系统的字体都在 C/Windows/Fonts 中,所以直接进去挑选喜欢的字体就行了。 
# 这里拷贝微软雅黑 msyh.ttf msyhbd.ttf
sudo mkfontscale
sudo mkfontdir
sudo fc-cache -f -v
sudo fc-list

运行

node index.js