node文字產生圖片的範例程式碼，node文字範例程式碼

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多毫秒，感覺足夠了，分享出來希望能給大家一個參照

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。