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