介绍
canvas-cli 是一个基于 Node.js 的命令行工具，它允许您使用 Canvas API 产生 PNG 或者 JPEG 格式的图片。
canvas-cli 提供了一个简单易用的命令行接口，您可以通过该接口来生成不同规格的图片，以及调整图片中各个元素的具体参数。它适用于需要经常使用图片生成工具的开发者，具有一定的学习和使用成本。
安装
您可以通过 npm 安装 canvas-cli：
npm install -g canvas-cli
快速开始
canvas-cli 最基本的命令是 canvas。要使用该命令来生成一张新的图片，您可以在命令行中输入如下指令：
canvas --width=800 --height=600
这会生成一张尺寸为 800x600 的空白的 PNG 图片。同样的，您也可以生成一张 JPG 格式的图片：
canvas --width=800 --height=600 --format=jpg
命令行输入 --help 将获取更为详细的帮助信息。
绘制图形
使用 canvas-cli 可以通过不同的 API 绘制基于路径的和基于栅格的图形。这里我们将会演示如何绘制一张天蓝色背景，上面有一条粗线的图形。
const Canvas = require('canvas');
const { createCanvas, loadImage } = Canvas;
const canvas = createCanvas(600, 400);
const ctx = canvas.getContext('2d');
// 绘制背景
ctx.fillStyle = '#87CEEB'; // 天蓝色
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制粗线条
ctx.beginPath();
ctx.strokeStyle = 'white'; // 白色
ctx.lineWidth = 10;
ctx.moveTo(40, 40);
ctx.lineTo(200, 40);
ctx.stroke();
// 将绘制结果输出为 png 格式的文件
const fs = require('fs');
const out = fs.createWriteStream(__dirname + '/output.png');
const stream = canvas.createPNGStream();
stream.pipe(out);
out.on('finish', () => console.log('The PNG file was created.'));运行这个脚本后，您的工作目录中会有一个名为 output.png 的文件，您可以在图片查看器中打开并查看绘制结果。
生成文本
canvas-cli 还可以允许您向图片中渲染图形元素。我们以绘制一个包含文本的图片为例：
const Canvas = require('canvas');
const { createCanvas, loadImage } = Canvas;
const canvas = createCanvas(600, 400);
const ctx = canvas.getContext('2d');
// 绘制背景
ctx.fillStyle = '#87CEEB'; // 天蓝色
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制文本
ctx.font = '48px serif';
ctx.fillStyle = 'white';
ctx.fillText('Hello, canvas-cli!', 50, 100);
// 将绘制结果输出为 png 格式的文件
const fs = require('fs');
const out = fs.createWriteStream(__dirname + '/output.png');
const stream = canvas.createPNGStream();
stream.pipe(out);
out.on('finish', () => console.log('The PNG file was created.'));最终输出的图片应该为一个天蓝色背景，并包含一行”Hello, canvas-cli!” 的白色文本元素。
总结
通过 canvas-cli，您可以方便地在命令行绘制和渲染图形元素，包括基于路径和基于栅格的图形。同时，使用 canvas-cli 还可以方便地对图形元素进行调整和格式化，从而生成符合您要求的图片。希望这篇文章能够对想深入学习前端图形绘制或者需要经常使用图片生成工具的开发者有所启发。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/60067381890c4f7277584291