這次帶給大家node操作文字生成圖片，node操作文字產生圖片的注意事項有哪些，以下就是實戰案例，一起來看一下。
解決思路
文字轉svg -> svg轉png -> 合併圖片
相關輪子
#
images Node.js 輕量級跨平台圖像編解碼庫，不需要額外安裝依賴
- text-to-svg 文字轉svg
- 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多毫秒，感覺足夠了，分享出來希望能給大家一個參照
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
JS的正規表示式應用
#JS中typeof和型別判斷（附程式碼）
JS怎麼偵測瀏覽器內的腳本
以上是node操作文字產生圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！
