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 相关文章推荐
ExtJs使用IFrame的实现代码
Mar 24 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
js代码实现轮播图
May 04 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封装的HttpClient类用法实例
2015/06/17 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
Three.js基础部分学习
2017/01/08 Javascript
Vuex简单入门
2017/04/19 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
iview实现图片上传功能
2020/06/29 Javascript
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python实现二叉搜索树
2016/02/03 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
有关Python的22个编程技巧
2018/08/29 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书