node文字生成圖片的示例代碼
今天老板提了需求,要在服務(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)輪子
- images Node.js 輕量級(jí)跨平臺(tái)圖像編解碼庫(kù),不需要額外安裝依賴
- text-to-svg 文字轉(zhuǎn)svg
- 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)增刪改查
本篇文章主要結(jié)合了nodejs操作mongodb數(shù)據(jù)庫(kù)實(shí)現(xiàn)增刪改查,包括對(duì)數(shù)據(jù)庫(kù)的增加,刪除,查找和更新,有興趣的可以了解一下。2016-12-12Node.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-08NodeJS、NPM安裝配置步驟(windows版本) 以及環(huán)境變量詳解
本篇文章主要介紹了NodeJS、NPM安裝配置步驟(windows版本) 以及環(huán)境變量詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05基于Node.js的WebSocket通信實(shí)現(xiàn)
這篇文章主要介紹了基于Node.js的WebSocket通信實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03詳解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ù)的詳細(xì)步驟,思路清晰,幫助大家快速使用Node連接Mysql數(shù)據(jù)庫(kù),感興趣的小伙伴們可以參考一下2016-03-03