使用 Node.js 在現有 PNG 上寫入文本

Question

我正在嘗試創建一個簡單的動態徽章 (png) 以嵌入靜態頁面以了解我的應用程序的狀態。

我想使用現有的 PNG 圖像並使用 Node.js 在其上寫一些文本。
我發現了很多庫，但它們都使用 Imagemagick 或 Cairo 作為本機依賴項，我想避免在服務器上安裝任何其他東西。

然后我找到了 lwip，但我真的不明白如何用它在圖像上寫文字。 我能怎么做？

Answer 1

你可以使用Jimp 。 它有一個打印方法：

var Jimp = require("jimp");

var fileName = 'test.png';
var imageCaption = 'Image caption';
var loadedImage;

Jimp.read(fileName)
    .then(function (image) {
        loadedImage = image;
        return Jimp.loadFont(Jimp.FONT_SANS_16_BLACK);
    })
    .then(function (font) {
        loadedImage.print(font, 10, 10, imageCaption)
                   .write(fileName);
    })
    .catch(function (err) {
        console.error(err);
    });

Answer 2

如果你想使用ttf文件，你可以使用gm這也會自動對齊文本，這樣你就不必跟蹤你的字母大小/位置。

const gm = require('gm').subClass({imageMagick: true});


gm('path/to/image.png')
        .fill("#FFFFFF")
        .font("./font.ttf", 20)
        .drawText(15, 10, "your text", 'southeast') //can be any location
        .write("./output.png", function (err) {
            if (!err) console.log('done');
        });