轉(zhuǎn)發(fā)鏈接：
前言
在頭條發(fā)布文章時，需要為文章配置一個封面圖片。我的常規(guī)做法就是網(wǎng)上搜一張圖片，然后利用 ，在圖片上加入文章標(biāo)題圖文轉(zhuǎn)換流程圖技巧，然后導(dǎo)出生成圖片，如下圖所示：
上圖實際就是在一張背景圖中，加入了一行文字。操作步驟簡單，但是每次都需要打開修改文字，感覺麻煩、工作重復(fù)。
能不能用代碼，解決日常生活中遇到的重復(fù)性工作呢？
實現(xiàn)方案
整體思路：
文字和圖形不能直接合并，需要將文字先轉(zhuǎn)換成圖形，然后再將圖形進行合并，大致步驟如下：
利用text-to-svg，將文字轉(zhuǎn)成SVG圖形；利用sharp，將SVG圖形與背景圖片合并；
分析實現(xiàn)：
1. 將文字轉(zhuǎn)為SVG圖形
將文字轉(zhuǎn)換為SVG圖形，需要借助Node的模塊text-to-png，該模塊能夠?qū)⑽淖职凑罩付ㄗ煮w生成SVG圖形。
SVG 意為可縮放矢量圖形（ ），放縮時不損失圖形質(zhì)量，SVG 是使用 XML 格式定義的圖像，如下所示：
在html頁面中嵌入了一個SVG表示三角形
展示效果：
SVG很好的充當(dāng)了中間變量的角色，言歸正傳，看下代碼如何實現(xiàn)轉(zhuǎn)換：
let?path?=?require('path');
let?TextToSVG?=?require('text-to-svg');
let?fontPath?=?path.join(__dirname,?'./fonts/msyhbd.ttf');//字體可以下載或者從本機系統(tǒng)內(nèi)copy
let?textToSVG?=?TextToSVG.loadSync(fontPath);?//?加載字體文件
let?options?=?{
????x:?0,?????????//文本開頭的水平位置（默認(rèn)值：0）
????y:?0,?????????//?文本的基線的垂直位置（默認(rèn)值：0）
????fontSize:?36,?//?字體大小
????anchor:?'top',?//?坐標(biāo)中的對象錨點
????//?letterSpacing:?"",??//?設(shè)置字母的間距
????attributes:?{
????????fill:?'#FFFFFF'?//?文字顏色
????}
}
let?textSVG?=?textToSVG.getSVG('【前端名獅】',?options);
console.log(textSVG);輸出結(jié)果：
2. 合并圖形
用于合并圖片的庫有很多，比如gm、jimp、、sharp等，其中sharp是基于庫來實現(xiàn)的，性能是最高的，所以我采用了sharp來合并圖形。
let?textSVG?=?Buffer.from(textSVG);
let?bgPath?=?path.join(__dirname,?'./img/bg.jpg');
let?targetPath?=?path.join(__dirname,?'../dist/bg.jpg');
sharp(bgPath).composite([{
????????input:?textSVG,
????????gravity:?'center'
????}]).toFile(targetPath);sharp庫注意事項
因為是基于c++實現(xiàn)的，所以sharp庫需要基于C++源代碼進行編譯構(gòu)建后才能使用。node-gyp是為node編譯C++擴展的時候使用的編譯工具，但是node-gyp依賴和VC++構(gòu)建工具來進行編譯。所以需要先安裝 和 VC++ 環(huán)境。最簡單的方式就是順序執(zhí)行下面安裝命令：
//?安裝構(gòu)建環(huán)境python、vc++
npm?install?--global?--production?windows-build-tools
//?安裝node-gyp?編譯工具
npm?install?--global?node-gyp
//?安裝sharp
npm?install?sharp官方文檔中，用sharp合并圖像時，給出的api是 ，但是你會發(fā)現(xiàn)，這個api并不存在。這個是因為sharp最新版本0.23.3刪除了，用進行了替換。
至此，我們就實現(xiàn)了一個簡單的生成公眾號封面圖片的功能，讓我們看看生成效果：
總結(jié)
程序可以幫助我們干重復(fù)的事情圖文轉(zhuǎn)換流程圖技巧，提高我們的生產(chǎn)力，如果程序員寫的代碼都用于解決自己生活中遇到的問題，對程序員無疑是巨大的動力源泉。
推薦經(jīng)典實例學(xué)習(xí)資料文章
《愛奇藝云剪輯Web端的技術(shù)實現(xiàn)》
《我再也不敢說我會寫前端 組件「實踐」》
《NodeX - 滴滴集團 Node.js 生態(tài)組件體系「實踐」》
《Node 完整指南》
《推薦18個精美插件「干貨」》
《前端開發(fā)需要了解常用7種設(shè)計模式》
《淺談瀏覽器架構(gòu)、單線程js、事件循環(huán)、消息隊列、宏任務(wù)和微任務(wù)》
《了不起的 HMR 學(xué)習(xí)指南（上）「含源碼講解」》
《了不起的 HMR 學(xué)習(xí)指南（下）「含源碼講解」》
《10個打開了我新世界大門的 （上）「實踐」》
《10個打開了我新世界大門的 （中）「實踐」》
《10個打開了我新世界大門的 （下）「實踐」》
《「圖文」 在中大型團隊的應(yīng)用實踐》
《Deno是代碼的瀏覽器，你認(rèn)同嗎？》
《前端存儲除了 還有啥？》
《 多線程編程?的前世今生》
《微前端方案 （實踐及總結(jié)）》
《「圖文」V8 垃圾回收原來這么簡單？》
《 5模塊聯(lián)邦引發(fā)微前端的革命？》
《基于 Web 端的人臉識別身份驗證「實踐」》
《「前端進階」高性能渲染十萬條數(shù)據(jù)(時間分片)》
《「前端進階」高性能渲染十萬條數(shù)據(jù)(虛擬列表)》
《圖解 實現(xiàn)原理（一）：基礎(chǔ)實現(xiàn)》
《圖解 實現(xiàn)原理（二）： 鏈?zhǔn)秸{(diào)用》
《圖解 實現(xiàn)原理（三）： 原型方法實現(xiàn)》
《圖解 實現(xiàn)原理（四）： 靜態(tài)方法實現(xiàn)》
《實踐教你從零構(gòu)建前端 Lint 工作流「干貨」》
《高性能多級多選級聯(lián)組件開發(fā)「JS篇」》
《深入淺出講解Node.js CLI 工具最佳實戰(zhàn)》
《延遲加載圖像以提高Web網(wǎng)站性能的五種方法「實踐」》
《比較 對象的四種方式「實踐」》
《使用 讓你的 Web 應(yīng)用如虎添翼（上）「干貨」》
《使用 讓你的 Web 應(yīng)用如虎添翼（中）「干貨」》
《使用 讓你的 Web 應(yīng)用如虎添翼（下）「干貨」》
《前端如何一次性處理10萬條數(shù)據(jù)「進階篇」》
《推薦三款正則可視化工具「JS篇」》
《如何讓用戶選擇是否離開當(dāng)前頁面？「JS篇」》
《開發(fā)人員更喜歡Deno的五大原因》
《僅用18行實現(xiàn)一個倒數(shù)計時器》
《圖文細(xì)說 的運行機制》
《一個輕量級 全文搜索庫，輕松實現(xiàn)站內(nèi)離線搜索》
《推薦Web程序員常用的15個源代碼編輯器》
《10個實用的JS技巧「值得收藏」》
《細(xì)品269個小函數(shù)，讓你少加班熬夜（一）「值得收藏」》
《細(xì)品269個小函數(shù)，讓你少加班熬夜（二）「值得收藏」》
《細(xì)品269個小函數(shù)，讓你少加班熬夜（三）「值得收藏」》
《細(xì)品269個小函數(shù)，讓你少加班熬夜（四）「值得收藏」》
《細(xì)品269個小函數(shù)，讓你少加班熬夜（五）「值得收藏」》
《細(xì)品269個小函數(shù)，讓你少加班熬夜（六）「值得收藏」》
《深入教你內(nèi)存泄漏如何防范》
《手把手教你7個有趣的 項目-上「附源碼」》
《手把手教你7個有趣的 項目-下「附源碼」》
《 使用 API 訪問攝像頭自拍》
《手把手教你前端代碼如何做錯誤上報「JS篇」》
《一文讓你徹底搞懂移動前端和Web 前端區(qū)別在哪里》
《63個 正則大禮包「值得收藏」》
《提高你的 技能10 個問答題》
《圖表庫的5個首選》
《一文徹底搞懂 中.與.seal的用法》
《可視化的 JS：動態(tài)圖演示 - 事件循環(huán) Event Loop的過程》
《教你如何用動態(tài)規(guī)劃和貪心算法實現(xiàn)前端瀑布流布局「實踐」》
《可視化的 js：動態(tài)圖演示 & Async/Await 的過程》
《原生JS封裝拖動驗證滑塊你會嗎？「實踐」》
《如何實現(xiàn)高性能的在線 PDF 預(yù)覽》
《細(xì)說使用字體庫加密數(shù)據(jù)-仿58同城》
《Node.js要完了嗎？》
《Pug 3.0.0正式發(fā)布，不再支持 Node.js 6/8》
《純JS手寫輪播圖（代碼邏輯清晰，通俗易懂）》
《 20 年 中文版之創(chuàng)立標(biāo)準(zhǔn)》
《值得收藏的前端常用60余種工具方法「JS篇」》
《箭頭函數(shù)和常規(guī)函數(shù)之間的 5 個區(qū)別》
《通過發(fā)布/訂閱的設(shè)計模式搞懂 Node.js 核心模塊 》
《「前端篇」不再為正則煩惱》
《「速圍」Node.js V14.3.0 發(fā)布支持頂級 Await 和 REPL 增強功能》
《深入細(xì)品瀏覽器原理「流程圖」》
《 已進入第三個時代，未來將何去何從？》
《前端上傳前預(yù)覽文件 image、text、json、video、audio「實踐」》
《深入細(xì)品 和瀏覽器渲染、幀動畫、空閑回調(diào)的關(guān)系》
《推薦13個有用的數(shù)組技巧「值得收藏」》
《前端必備基礎(chǔ)知識：. 詳解》
《不要再依賴了》
《犀牛書作者：最該忘記的特性》
《36個工作中常用的函數(shù)片段「值得收藏」》
《Node + H5 實現(xiàn)大文件分片上傳、斷點續(xù)傳》
《一文了解文件上傳全過程（1.8w字深度解析）「前端進階必備」》
《【實踐總結(jié)】關(guān)于小程序掙脫枷鎖實現(xiàn)批量上傳》
《手把手教你前端的各種文件上傳攻略和大文件斷點續(xù)傳》
《字節(jié)跳動面試官：請你實現(xiàn)一個大文件上傳和斷點續(xù)傳》
《談?wù)勄岸岁P(guān)于文件上傳下載那些事【實踐】》
《手把手教你如何編寫一個前端圖片壓縮、方向糾正、預(yù)覽、上傳插件》
《最全的 模塊化方案和工具》
《「前端進階」JS中的內(nèi)存管理》
《正則深入以及10個非常有意思的正則實戰(zhàn)》
《前端面試者經(jīng)常忽視的一道 面試題》
《一行JS代碼實現(xiàn)一個簡單的模板字符串替換「實踐」》
《JS代碼是如何被壓縮的「前端高級進階」》
《前端開發(fā)規(guī)范：命名規(guī)范、html規(guī)范、css規(guī)范、js規(guī)范》
《【規(guī)范篇】前端團隊代碼規(guī)范最佳實踐》
《100個原生代碼片段知識點詳細(xì)匯總【實踐】》
《關(guān)于前端174道 知識點匯總（一）》
《關(guān)于前端174道 知識點匯總（二）》
《關(guān)于前端174道 知識點匯總（三）》
《幾個非常有意思的知識點總結(jié)【實踐】》
《都2020年了，你還不會 裝飾器？》
《實現(xiàn)圖片合成下載》
《70個知識點詳細(xì)總結(jié)（上）【實踐】》
《70個知識點詳細(xì)總結(jié)（下）【實踐】》
《開源了一個 版敏感詞過濾庫》
《送你 43 道 面試題》
《3個很棒的小眾庫，你值得擁有》
《手把手教你深入鞏固知識體系【思維導(dǎo)圖】》
《推薦7個很棒的產(chǎn)品步驟引導(dǎo)庫》
《Echa哥教你徹底弄懂 執(zhí)行機制》
《一個合格的中級前端工程師需要掌握的 28 個 技巧》
《深入解析高頻項目中運用到的知識點匯總【JS篇】》
《 工具函數(shù)大全【新】》
《從中看設(shè)計模式(總結(jié))》
《身份證號碼的正則表達式及驗證詳解(，Regex)》
《瀏覽器中實現(xiàn)計時器的4種創(chuàng)新方式》
《Three.js 動效方案》
《手把手教你常用的59個JS類方法》
《127個常用的JS代碼片段，每段代碼花30秒就能看懂-【上】》
《深入淺出講解 js 深拷貝 vs 淺拷貝》
《手把手教你JS開發(fā)H5游戲【消滅星星】》
《深入淺出講解JS中this/apply/call/bind巧妙用法【實踐】》
《手把手教你全方位解讀JS中this真正含義【實踐】》
《書到用時方恨少，一大波JS開發(fā)工具函數(shù)來了》
《干貨滿滿!如何優(yōu)雅簡潔地實現(xiàn)時鐘翻牌器(支持JS/Vue/React)》
《手把手教你JS 異步編程六種方案【實踐】》
《讓你減少加班的15條高效JS技巧知識點匯總【實踐】》
《手把手教你JS開發(fā)H5游戲【黃金礦工】》
《手把手教你JS實現(xiàn)監(jiān)控瀏覽器上下左右滾動》
《JS 經(jīng)典實例知識點整理匯總【實踐】》
《2.6萬字JS干貨分享，帶你領(lǐng)略前端魅力【基礎(chǔ)篇】》
《2.6萬字JS干貨分享，帶你領(lǐng)略前端魅力【實踐篇】》
《簡單幾步讓你的 JS 寫得更漂亮》
《恭喜你獲得治療JS this的詳細(xì)藥方》
《談?wù)勄岸岁P(guān)于文件上傳下載那些事【實踐】》
《面試中教你繞過關(guān)于 作用域的 5 個坑》
《插件（常用的插件庫）》
《【JS】如何防止重復(fù)發(fā)送ajax請求》
《+實現(xiàn)自定義畫板》
《 在 JS 中的應(yīng)用「前端篇」》