nodejs 文字转图片方法

最新推荐文章于 2025-11-15 17:58:37 发布

原创最新推荐文章于 2025-11-15 17:58:37 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

javascript 专栏收录该内容

4 篇文章

订阅专栏

这个博客介绍了一个使用Node.js和`node-canvas`模块将文字转化为图片的方法。`writeTextToCanvas`函数接受文字和配置选项，如字体、填充、描边颜色等，然后创建并返回一个包含指定文字的canvas对象，最后可以将其转换为Base64编码的图片数据。

引用示例

import writeTextToCanvas from "./core/clip/TextHandler/writeTextToCanvas.js"; 
let text="文字转图片";
let options = {
    font: "16px sans-serif",  
    fill: true,
    stroke: false,
    fillColor: "#ffff00",
    strokeColor: "#000000",
    strokeWidth: 1,
    backgroundColor:  "#00000000",
    padding: 2
};
let canvas=writeTextToCanvas(text,options); 
let base64 = canvas.toDataURL();

使用了node-canvas模块

/**
 * 文字转图片方法
 * @param {*} text 
 * @param {*} options 
 * @returns 
 */
function writeTextToCanvas(text, options) {
    let font =options.font;
    let fontArr=font.split(' ');
    let fontSize=11;
    fontArr.map((v, i) => {
        if (v.indexOf('px') > -1) {
            fontSize = v.replace(/px/g, '')
        }
    }); 
 	......
 	......
    const _canvas = createCanvas(1, 1);
    let context2D = _canvas.getContext("2d"); 
    context2D.font = font;
    context2D.lineJoin = "round";
    context2D.lineWidth = strokeWidth;  
    let fsize = parseInt(fontSize.replace(/px/g, ""));
    let width = fsize * text.length + doublePadding;
    let height = 1.2 * (fsize);
    let x=0;
    let y = height * 0.8;
    _canvas.width = width;
    _canvas.height = height; 
    context2D.font = font;
    context2D.lineJoin = "round";
    context2D.lineWidth = strokeWidth;
    if (backgroundColor !=="#00000000") {
        context2D.fillStyle = backgroundColor ;
        context2D.fillRect(0, 0, _canvas.width, _canvas.height);
    } 
    if (stroke) {
        let strokeColor = options.strokeColor;
        context2D.strokeStyle = strokeColor;
        context2D.strokeText(text, x + padding, y);
    } 
    if (fill) {
        let fillColor =options.fillColor;
        context2D.fillStyle = fillColor;
        context2D.fillText(text, x + padding, y);
    } 
    return _canvas;
}
export default writeTextToCanvas;