我的编程空间,编程开发者的网络收藏夹
学习永远不晚

node中怎么根据文字生成图片

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

node中怎么根据文字生成图片

node中怎么根据文字生成图片,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

解决思路

文字转svg -> svg转png -> 合并图片

相关轮子

  1. images Node.js 轻量级跨平台图像编解码库,不需要额外安装依赖

  2. text-to-svg 文字转svg

  3. svg2png svg转png图片

示例代码

'use strict';

const fs = require('fs');
const images = require('images');
const TextToSVG = require('text-to-svg');
const svg2png = require("svg2png");
const Promise = require('bluebird');

Promise.promisifyAll(fs);

const textToSVG = TextToSVG.loadSync('fonts/文泉驿微米黑.ttf');

const sourceImg = images('./i/webwxgetmsgimg.jpg');
const sWidth = sourceImg.width();
const sHeight = sourceImg.height();

const svg1 = textToSVG.getSVG('魏长青-人人讲App', {
 x: 0,
 y: 0,
 fontSize: 24,
 anchor: 'top',
});

const svg2 = textToSVG.getSVG('邀请您参加', {
 x: 0,
 y: 0,
 fontSize: 16,
 anchor: 'top',
});

const svg3 = textToSVG.getSVG('人人讲课程', {
 x: 0,
 y: 0,
 fontSize: 32,
 anchor: 'top',
});

Promise.coroutine(function* generateInvitationCard() {
 const targetImg1Path = './i/1.png';
 const targetImg2Path = './i/2.png';
 const targetImg3Path = './i/3.png';
 const targetImg4Path = './i/qrcode.jpg';
 const [buffer1, buffer2, buffer3] = yield Promise.all([
  svg2png(svg1),
  svg2png(svg2),
 svg2png(svg3),
 ]);

 yield Promise.all([
  fs.writeFileAsync(targetImg1Path, buffer1),
  fs.writeFileAsync(targetImg2Path, buffer2),
  fs.writeFileAsync(targetImg3Path, buffer3),
 ]);

 const target1Img = images(targetImg1Path);
 const t1Width = target1Img.width();
 const t1Height = target1Img.height();
 const offsetX1 = (sWidth - t1Width) / 2;
 const offsetY1 = 200;

 const target2Img = images(targetImg2Path);
 const t2Width = target2Img.width();
 const t2Height = target2Img.height();
 const offsetX2 = (sWidth - t2Width) / 2;
 const offsetY2 = 240;

 const target3Img = images(targetImg3Path);
 const t3Width = target3Img.width();
 const t3Height = target3Img.height();
 const offsetX3 = (sWidth - t3Width) / 2;
 const offsetY3 = 270;

 const target4Img = images(targetImg4Path);
 const t4Width = target4Img.width();
 const t4Height = target4Img.height();
 const offsetX4 = (sWidth - t4Width) / 2;
 const offsetY4 = 400;

 images(sourceImg)
 .draw(target1Img, offsetX1, offsetY1)
 .draw(target2Img, offsetX2, offsetY2)
 .draw(target3Img, offsetX3, offsetY3)
 .draw(target4Img, offsetX4, offsetY4)
 .save('./i/card.png', { quality : 90 });
})().catch(e => console.error(e));

关于node中怎么根据文字生成图片问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网行业资讯频道了解更多相关知识。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

node中怎么根据文字生成图片

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

node文字生成图片的示例代码

今天老板提了需求,要在服务端生成邀请卡,嗯…,简单的说就是把要这张:变成差多这样的:后端搞ruby的哥们搞了个html转图片,说转得太慢了,我就把这坑接下来了所以睡前就倒腾了下,搞了个简单的实现 解决思路 文字转svg -> svg转png
2022-06-04

怎么在Android中利用文字生成图片

这期内容当中小编将会给大家带来有关怎么在Android中利用文字生成图片,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。1.根据原图片的大小和字体的大小创建一张空白图片 2.把原图片按字体的大小分成若干块,
2023-05-30

java根据数据生成图片的方法是什么

在Java中,可以使用Java 2D图形库来生成图片。以下是生成图片的一种常见方法:1. 创建一个BufferedImage对象,该对象是一个可以在内存中进行绘图的图像缓冲区。```javaBufferedImage image = new
2023-09-17

JAVA怎么根据流生成PDF文件

Java中可以使用iText库来根据流生成PDF文件。iText是一个开源的Java库,用于处理PDF文件。首先,需要下载iText库并将其添加到Java项目中。以下是一个示例代码,演示了如何根据流生成PDF文件:```javaimport
2023-08-15

用java把文字生成图片后放大失真,怎么才能生成高质量的图片

要生成高质量的图片,您可以尝试以下方法:1. 使用更高的分辨率:在生成图片时,设置更高的分辨率可以提高图像的质量。可以通过设置图像的宽度和高度来实现。2. 使用合适的图片格式:选择合适的图片格式也很重要。对于包含大量颜色和细节的图像,使用无
2023-09-08

JAVA怎么根据时间戳生成文件夹

在Java中,可以使用`java.io.File`类来创建文件夹。根据时间戳生成文件夹的步骤如下:获取当前时间戳,可以使用`System.currentTimeMillis()`方法。将时间戳转换成合适的格式,例如使用`SimpleDat
2023-10-24

php怎么根据get值生成缓存文件

要根据GET值生成缓存文件,可以按照以下步骤进行操作:1. 首先,获取GET值。在PHP中,可以使用 $_GET 超全局变量来获取GET请求的参数。例如,如果你要获取名为 id 的GET参数的值,可以使用 $id = $_GET['id']
2023-10-18

java怎么根据xml模板生成xml文件

在Java中,可以使用DOM(Document Object Model)或者JAXB(Java Architecture for XML Binding)来生成XML文件。使用DOM:import javax.xml.parsers.Do
java怎么根据xml模板生成xml文件
2024-03-07

怎么在Python中根据模板批量生成docx文档

今天就跟大家聊聊有关怎么在Python中根据模板批量生成docx文档,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。一、需求说明能够根据模板批量生成docx文档。具体而言,读取exce
2023-06-15

怎么在Html5页面中生成图片

本篇文章为大家展示了怎么在Html5页面中生成图片,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。LiveDemo/** * 根据window.devicePixelRatio获取像素比
2023-06-09

log4j怎么根据变量动态生成文件名

这篇文章将为大家详细讲解有关log4j怎么根据变量动态生成文件名,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。根据变量动态生成文件名简单的log4j设置一般情况下,log4j配置文件简单的设置为:log4
2023-06-22

Node.js怎么生成二维码图片并带底部文字说明

这篇文章主要介绍“Node.js怎么生成二维码图片并带底部文字说明”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Node.js怎么生成二维码图片并带底部文字说明”文章能帮助大家解决问题。在Node.
2023-07-04

Node.js在图片模板上怎么生成二维码图片并附带底部文字说明

今天小编给大家分享一下Node.js在图片模板上怎么生成二维码图片并附带底部文字说明的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一
2023-06-17

怎么在php中生成验证码图片

小编给大家分享一下怎么在php中生成验证码图片,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.获取生成验证码字体:在php文件路径新建一个fonts文件夹,里面
2023-06-14

Node.js怎么生成二维码图片并附带底部文字说明

这篇文章主要讲解了“Node.js怎么生成二维码图片并附带底部文字说明”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Node.js怎么生成二维码图片并附带底部文字说明”吧!在Node.js中
2023-07-04

PHP中怎么实现生成图片水印

PHP中怎么实现生成图片水印,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。文本水印我们使用函数watermark_text()来生成文本水印,你必须先指定字体源文件、字体大
2023-06-17

编程热搜

目录