一款部落格文章封面圖生成工具

• 2020 年 4 月 2 日
• 筆記

介紹

為了生成風格比較統一的圖片，讓部落格的整體風格看起來比較統一，而不是很亂的感覺，自己動手寫了一款簡單的影像生成小工具，看下部落格之前和現在的對比圖。

之前的直接採用各個產品的截圖，但是都有其各自的風格，放在一起看起來就不是那麼美觀了。

之前的 現在採用自己製作的小工具，之後風格變得比較統一了，我自己感覺看起來，比較舒服了。

工具簡介

無服務，純前端進行實現相關功能，託管在Github上，通過其pages服務進行部署。功能很簡單，一個畫布，中間可以放圖標，填寫文字，然後選擇自己喜歡的背景色，設置其大小，就能生成一張圖片了。

如何製作一張圖

1.設置圖片的大小（710×354）

2.複製一個小圖標，或者從本地上傳一個小圖標，比如少數派的logo，你還可以改變圖標的大小。

3.事實上這樣我所需要的圖片就製作完了，如果你想在給圖片加個陰影也可以。

4.點擊下載，就會將製作的圖片生成一張png格式的圖片。

功能清單

• 支援調整圖片大小
• 支援圖標直接複製，本地上傳
• 支援調整背景色
• 配色網站，圖標網站推薦，幫你快速找到想要的
• 支援文本添加，沒有合適圖標，寫點文字也湊活
• 支援圖片陰影顯示
• 支援平台選擇，快速適應幾個平台推薦的圖片尺寸
• 支援獲取圖標的主題顏色，本意是想能夠快速找到對應的背景圖，但是現在看來，在沒有智慧推薦方案的前提下，沒什麼用

總結

純屬個人興趣所做，後面還有諸多的想法需要實現，比如結合人工智慧，能夠根據圖標，自動推薦適合的背景色。添加水印，在背景上添加滿屏水印，或者單個水印。當然，在線圖片設計很多，很多工具功能豐富，可操作的餘地很多，我個人不想做成這樣，實力不允許，再者覺得自由度越高，選擇越困難……

地址

https://nav.rdonly.com/laboratory/bgimage/backimage.html

ps

我這邊載入比較慢,但是因為靜態網頁,直接 Ctrl + S,就可以保存,本地打開更快 .