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

 更新时间:2017年10月26日 15:06:23   作者:Amastyer  
本篇文章主要介绍了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多毫秒,感觉足够了,分享出来希望能给大家一个参照

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

相关文章

  • node实现简单的增删改查接口实例代码

    node实现简单的增删改查接口实例代码

    在本篇文章里小编给大家整理的是关于node实现简单的增删改查接口的相关实例内容,有需要的朋友们可以学习下。
    2019-08-08
  • 用node开发并发布一个cli工具的方法步骤

    用node开发并发布一个cli工具的方法步骤

    这篇文章主要介绍了用node开发并发布一个cli工具的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • npm install --save 、--save-dev 、-D、-S 的区别与NODE_ENV的配置方法

    npm install --save 、--save-dev 、-D、-S&nb

    这篇文章主要介绍了npm install --save 、--save-dev 、-D、-S 的区别与NODE_ENV的配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 一文详解如何在IDEA中配置Node.js

    一文详解如何在IDEA中配置Node.js

    idea中支持运行很多种编程语言,只需要在电脑中安装好对应的语言环境,下面这篇文章主要给大家介绍了关于如何在IDEA中配置Node.js的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • nodejs的路径问题的解决

    nodejs的路径问题的解决

    这篇文章主要介绍了nodejs的路径问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 使用Koa实现一个获取视频播放地址的接口

    使用Koa实现一个获取视频播放地址的接口

    在本节课中,我们将学习如何使用 Koa 实现一个获取视频播放地址的接口,我们将创建一个控制器,通过视频 ID 获取播放地址,并设置相应的路由,最后,我们将使用 Postman 进行测试,感兴趣的朋友可以参考下
    2024-05-05
  • 详解如何实现自由切换Node.js版本

    详解如何实现自由切换Node.js版本

    作为开发者,我们经常在不同的项目中需要使用不同版本的 Node.js,有时旧项目需要旧版本,而新项目则可能依赖最新的 Node.js 版本,本文将介绍几种常用的方法来自由切换 Node.js 版本,需要的朋友可以参考下
    2024-10-10
  • 详解Nodejs get获取远程服务器接口数据

    详解Nodejs get获取远程服务器接口数据

    这篇文章主要介绍了Nodejs get获取远程服务器接口数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • nodejs入门教程一:概念与用法简介

    nodejs入门教程一:概念与用法简介

    这篇文章主要介绍了nodejs入门教程之概念与用法,结合实例形式分析了nodejs基本概念、功能、命令与相关使用技巧,需要的朋友可以参考下
    2017-04-04
  • node.js中的fs.statSync方法使用说明

    node.js中的fs.statSync方法使用说明

    这篇文章主要介绍了node.js中的fs.statSync方法使用说明,本文介绍了fs.statSync的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12

最新评论