Nodejs 用node-canvas绘制中文的时候乱码怎么解决？

Nodejs 用node-canvas绘制中文的时候乱码怎么解决？

用node-canvas绘制中文的时候乱码怎么解决？

8 回复

当然可以。以下是一个关于如何使用 Node.js 和 node-canvas 库绘制中文文本时解决乱码问题的详细指南。

如何解决 Node.js 使用 node-canvas 绘制中文时出现乱码？

当你尝试在 node-canvas 中使用中文字符时，可能会遇到乱码问题。这是因为默认的字体可能不支持中文字符。为了解决这个问题，你需要确保使用了支持中文的字体文件。

解决步骤

  1. 安装必要的库： 首先，确保你已经安装了 canvas 和 canvas-prebuilt（如果你使用的是 Windows）。

    npm install canvas

  2. 下载中文字体： 你可以从网上下载一个支持中文的字体文件，比如 NotoSansSC-Regular.ttf。将该字体文件放在你的项目目录中。

  3. 加载并使用中文字体： 在你的 Node.js 脚本中，使用 node-canvas 加载这个字体，并设置为绘图上下文的默认字体。

示例代码

const { createCanvas, registerFont } = require('canvas');

// 注册字体
registerFont('./NotoSansSC-Regular.ttf', { family: 'Noto Sans SC' });

const width = 400;
const height = 200;
const canvas = createCanvas(width, height);
const ctx = canvas.getContext('2d');

// 设置背景颜色
ctx.fillStyle = '#f0f0f0';
ctx.fillRect(0, 0, width, height);

// 设置字体
ctx.font = '32px "Noto Sans SC"';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// 绘制中文文本
ctx.fillStyle = 'black';
ctx.fillText('你好，世界！', width / 2, height / 2);

// 将结果保存为图片
const out = fs.createWriteStream(__dirname + '/output.png');
const outStream = canvas.createPNGStream();
outStream.pipe(out);
out.on('finish', () => console.log('The PNG file was created.'));

解释

  • 注册字体：registerFont 函数用于注册一个字体文件。它接受两个参数：字体文件路径和一个配置对象，其中 family 属性定义了字体名称。

  • 设置字体：通过 ctx.font 设置字体大小和字体名称。确保字体名称与注册时的名称一致。

  • 绘制文本：使用 fillText 方法在指定位置绘制文本。这里我们使用了居中对齐的方式。

  • 保存图像：最后，我们将生成的图像保存到文件中。

通过以上步骤，你应该能够成功地在 node-canvas 中绘制出没有乱码的中文文本。


可能需要加载字体文件

需要加载什么字体文件，可以说详细些吗？谢谢

两年前用过，当时的结论貌似是要么官方支持，要么就无法解决这个问题。

如果实在没法解决node-canvas乱码问题的话，有什么可以替代node-canvas的模块？

用雅黑测试可以绘制中文 ctx.font = ‘200px “Microsoft YaHei”’;

原因是服务器上缺少中文字体，请看我这篇文章的解决办法： http://my.oschina.net/u/129529/blog/266843

要在使用 node-canvas 绘制中文时避免乱码问题，你需要确保字体文件支持中文字符，并且正确地加载了这些字体。以下是一个示例代码，展示了如何解决这个问题：

  1. 安装所需的依赖：

    npm install canvas

  2. 示例代码：

    const { createCanvas, loadImage } = require('canvas');
const fs = require('fs');

// 加载一个支持中文的字体文件（例如 Noto Sans CJK TC.ttf）
const fontPath = 'path/to/NotoSansCJKtc-Regular.otf';
const fontData = fs.readFileSync(fontPath);
const font = new FontFace('Noto Sans CJK TC', `url(${fontPath})`);

// 创建一个新的画布
const canvas = createCanvas(500, 500);
const ctx = canvas.getContext('2d');

// 加载字体并应用到上下文中
font.load().then((loadedFont) => {
  ctx.font = `${loadedFont.weight} ${loadedFont.style} ${loadedFont.size}px ${loadedFont.family}`;
  ctx.fillStyle = 'black';

  // 在画布上绘制中文文本
  ctx.fillText('你好，世界！', 50, 50);

  // 将结果保存为图片
  const buffer = canvas.toBuffer();
  fs.writeFileSync('output.png', buffer);
}).catch(error => {
  console.error('Failed to load font:', error);
});

解释

  1. 加载字体：

    • 使用 fs.readFileSync 读取字体文件。
    • 创建一个 FontFace 对象来定义字体样式。

  2. 创建画布：

    • 使用 createCanvas 创建一个画布。
    • 获取画布的 2D 渲染上下文 ctx。

  3. 加载并应用字体：

    • 使用 font.load() 方法异步加载字体。
    • 加载成功后，设置 ctx.font 来应用加载的字体。
    • 使用 ctx.fillText 在画布上绘制中文文本。

  4. 保存结果：

    • 使用 canvas.toBuffer 将画布内容转换为 Buffer。
    • 将结果保存为 PNG 文件。

通过这种方式，你可以确保使用支持中文的字体来避免乱码问题。请确保你已经安装了正确的字体文件，并将其路径正确地传递给代码。

回到顶部