欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

node文字生成圖片的示例代碼

 更新時(shí)間:2017年10月26日 15:06:23   作者:Amastyer  
本篇文章主要介紹了node文字轉(zhuǎn)圖片的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

今天老板提了需求,要在服務(wù)端生成邀請(qǐng)卡,嗯…,簡(jiǎn)單的說(shuō)就是把要這張:


變成差多這樣的:


后端搞ruby的哥們搞了個(gè)html轉(zhuǎn)圖片,說(shuō)轉(zhuǎn)得太慢了,我就把這坑接下來(lái)了

所以睡前就倒騰了下,搞了個(gè)簡(jiǎn)單的實(shí)現(xiàn)

解決思路

文字轉(zhuǎn)svg -> svg轉(zhuǎn)png -> 合并圖片

相關(guān)輪子

  1. images Node.js 輕量級(jí)跨平臺(tái)圖像編解碼庫(kù),不需要額外安裝依賴
  2. text-to-svg 文字轉(zhuǎn)svg
  3. svg2png svg轉(zhuǎn)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('魏長(zhǎng)青-人人講App', {
 x: 0,
 y: 0,
 fontSize: 24,
 anchor: 'top',
});

const svg2 = textToSVG.getSVG('邀請(qǐng)您參加', {
 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));

注意事項(xiàng)

text-to-svg需要中文字體的支持,不然中文會(huì)亂碼

在我的破電腦上執(zhí)行一次只花了500多毫秒,感覺(jué)足夠了,分享出來(lái)希望能給大家一個(gè)參照

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • nodejs連接mongodb數(shù)據(jù)庫(kù)實(shí)現(xiàn)增刪改查

    nodejs連接mongodb數(shù)據(jù)庫(kù)實(shí)現(xiàn)增刪改查

    本篇文章主要結(jié)合了nodejs操作mongodb數(shù)據(jù)庫(kù)實(shí)現(xiàn)增刪改查,包括對(duì)數(shù)據(jù)庫(kù)的增加,刪除,查找和更新,有興趣的可以了解一下。
    2016-12-12
  • Node.js Koa2使用JWT進(jìn)行鑒權(quán)的方法示例

    Node.js Koa2使用JWT進(jìn)行鑒權(quán)的方法示例

    這篇文章主要介紹了Node.js Koa2使用JWT進(jìn)行鑒權(quán)的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08
  • nodejs切換版本使用最新教程(不需要卸載重裝)

    nodejs切換版本使用最新教程(不需要卸載重裝)

    有時(shí)候需要運(yùn)行不同的項(xiàng)目,node版本不一致會(huì)導(dǎo)致不少問(wèn)題,特別是最新版本對(duì)應(yīng)的一些插件,由于語(yǔ)法等原因?qū)е虏灰欢嫒莸桶姹?這樣運(yùn)行低版本環(huán)境的項(xiàng)目的時(shí)候很多坑,這篇文章主要給大家介紹了關(guān)于nodejs切換版本使用(不需要卸載重裝)的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • NodeJS、NPM安裝配置步驟(windows版本) 以及環(huán)境變量詳解

    NodeJS、NPM安裝配置步驟(windows版本) 以及環(huán)境變量詳解

    本篇文章主要介紹了NodeJS、NPM安裝配置步驟(windows版本) 以及環(huán)境變量詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • Nodejs模塊的調(diào)用操作實(shí)例分析

    Nodejs模塊的調(diào)用操作實(shí)例分析

    這篇文章主要介紹了Nodejs模塊的調(diào)用操作,結(jié)合實(shí)例形式分析了nodejs模塊的定義與調(diào)用相關(guān)操作技巧,需要的朋友可以參考下
    2018-12-12
  • npm鏡像源更改后不生效(附淘寶鏡像源)

    npm鏡像源更改后不生效(附淘寶鏡像源)

    淘寶的NPM鏡像源registry.npm.taobao.org已經(jīng)過(guò)期,導(dǎo)致npm?install時(shí)出現(xiàn)證書(shū)過(guò)期錯(cuò)誤,更換鏡像源至registry.npmmirror.com后,如果仍出現(xiàn)錯(cuò)誤,可能是項(xiàng)目中的package-lock.json或.npmrc文件鎖定了舊的鏡像源,本文就來(lái)介紹一下解決方法,感興趣的可以了解一下
    2024-10-10
  • 基于Node.js的WebSocket通信實(shí)現(xiàn)

    基于Node.js的WebSocket通信實(shí)現(xiàn)

    這篇文章主要介紹了基于Node.js的WebSocket通信實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-03-03
  • Node.js高版本降為低版本的操作步驟

    Node.js高版本降為低版本的操作步驟

    部分老舊項(xiàng)目需要使用低版本的node,網(wǎng)上很多是無(wú)效的,高版本無(wú)法直接安裝低版本node,但是低版本nodejs可以安裝部分高版本node,從而達(dá)到升級(jí)效果,下面這篇文章主要給大家介紹了關(guān)于nodejs高版本降為低版本的詳細(xì)解決方案,需要的朋友可以參考下
    2024-03-03
  • 詳解nodejs中exports和module.exports的區(qū)別

    詳解nodejs中exports和module.exports的區(qū)別

    本文主要介紹了exports 和 module.exports 的區(qū)別。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-02-02
  • 初步使用Node連接Mysql數(shù)據(jù)庫(kù)

    初步使用Node連接Mysql數(shù)據(jù)庫(kù)

    這篇文章主要介紹了Node連接Mysql數(shù)據(jù)庫(kù)的詳細(xì)步驟,思路清晰,幫助大家快速使用Node連接Mysql數(shù)據(jù)庫(kù),感興趣的小伙伴們可以參考一下
    2016-03-03

最新評(píng)論