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


Posted in Javascript onOctober 26, 2017

今天老板提了需求,要在服务端生成邀请卡,嗯…,简单的说就是把要这张:

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

变成差多这样的:

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

后端搞ruby的哥们搞了个html转图片,说转得太慢了,我就把这坑接下来了

所以睡前就倒腾了下,搞了个简单的实现

解决思路

文字转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));

注意事项

text-to-svg需要中文字体的支持,不然中文会乱码

在我的破电脑上执行一次只花了500多毫秒,感觉足够了,分享出来希望能给大家一个参照

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
文本框文本自动补全效果示例分享
Jan 19 Javascript
浅析node.js中close事件
Nov 26 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
详解javascript函数写法大全
Mar 25 Javascript
Vue的Options用法说明
Aug 14 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 #Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 #Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 #Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 #Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 #Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 #Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 #Javascript
You might like
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
vue 递归组件的简单使用示例
2021/01/14 Vue.js
Python中集合类型(set)学习小结
2015/01/28 Python
Python 专题一 函数的基础知识
2017/03/16 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
EM算法的python实现的方法步骤
2018/01/02 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
详解python 注释、变量、类型
2018/08/10 Python
浅谈Django的缓存机制
2018/08/23 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
中职毕业生自我鉴定
2014/09/13 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
高一数学教学反思
2016/02/18 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
Mysql 如何查询时间段交集
2021/06/08 MySQL
P站美图推荐——变身女主角特辑
2022/03/20 日漫