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 相关文章推荐
用JavaScript隐藏控件的方法
Sep 21 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 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
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
解决laravel session失效的问题
2019/10/14 PHP
语义化 H1 标签
2008/01/14 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
JavaScript中this详解
2015/09/01 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
车祸赔偿收入证明
2014/01/09 职场文书
春节联欢会策划方案
2014/05/16 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
运动会100米加油稿
2015/07/21 职场文书