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 相关文章推荐
js借助ActiveXObject实现创建文件
Sep 29 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
CI框架附属类用法分析
2018/12/26 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
python实现批量注册网站用户的示例
2019/02/22 Python
Django缓存系统实现过程解析
2019/08/02 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
python 如何将office文件转换为PDF
2020/09/22 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
百度软件工程师职位
2013/02/14 面试题
日语专业推荐信
2013/11/12 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
保证书范文大全
2014/04/28 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
网络营销计划
2015/01/17 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python