作者：唐璇（卡內基梅隆大學計算機科學系，ArcBlock暑期實習生）
指導老師：張涵（ArcBlock，工程師）

今年夏天我在ArcBlock進行了為期三個月的實習。在這段實習期間，我學習了網頁開發技術，包括React和Node.js。基於這些基礎，我閱讀了ArcBlock的開發者文件，對ArcBlock的Blocklet平台有了初步的了解。接著，我專注於完成一個能根據模板生成圖片的去中心化應用（DApp）。在這篇部落格中，我將簡要介紹這個專案。

為什麼去中心化圖片產生器很重要

在某些類型的網頁應用中，經常需要使用大量由模板生成的圖片，例如電商網站的模板化商品圖片、社群分享的活動圖片、搜尋引擎與社群連結優化的Open Graph圖片等等。使用基於模板的圖片產生器，比起讓設計師一張張設計製作圖片，效率高出許多。過去已有不少服務協助用戶完成這件事，但缺點是您的網站會依賴這些第三方服務。

去中心化圖片產生器將這種基於模板的圖片生成服務轉化為可組合的Blocklet，讓任何需要使用它的網站都能安裝並組合自己的圖片產生器，無需依賴任何第三方服務。

設計

圖片產生器分為兩個頁面：首頁與編輯頁。首頁供用戶選擇想要的模板。如下面圖片所示，有五個主題模板：教育、科技、娛樂、金融與環境。每個主題下有六個模板可供選擇。選擇後，使用者將進入編輯頁。

編輯頁分為標題區、預覽區、參數編輯區與功能區，以下將逐一介紹這四個部分。

標題區與預覽區

如上圖所示，左上角為返回首頁的按鈕。該按鈕與置中顯示的文字組成標題區。預覽區位於圖片下方，初始狀態顯示用戶選擇的模板。之後，使用者只需在參數編輯區修改圖片參數或新增文字，變更會即時反映在預覽區。

參數編輯區

參數編輯區分為五個區塊，對應圖片的五種參數類型。

參數區域1：位於左上方，使用者可調整圖片大小，即圖片的寬度與高度。初始值為模板的原始尺寸。兩個輸入框下方有一個選項，供使用者勾選是否保持圖片原始的寬高比。若勾選此選項，使用者只需修改寬度或高度其中一項，另一項會自動依比例調整。

參數區域2：由於使用者常需在圖片上添加文字以豐富資訊，我們提供此區域讓使用者輸入想要添加的文字。輸入框支援換行與空格。

參數區域3：當使用者添加文字後，接下來的三個參數區域用於調整文字格式。首先，使用者可透過輸入框調整文字大小。此區域也可調整文字位置：上邊距代表文字與圖片頂端的距離，左邊距代表文字與圖片左側的距離。

參數區域4：位於第二排最左側，使用者可選擇文字字型。初始值為大多數人使用的Arial字型。

參數區域5：最後，使用者可調整文字顏色。使用者需先在色條上選擇一個大致顏色，接著從下方五個顏色中挑選具體色彩。

上述功能主要涉及前端，我使用React實作。每個參數區域對應一個React元件，方便管理。每個參數對應一個React狀態，方便透過輸入框或下拉選單調整。我導入了MUI函式庫來實現這些輸入框。取得這些參數後，只需將它們傳入HTML與CSS樣式，即可在預覽區渲染。

用戶下載圖片的具體功能則是透過呼叫html2canvas函式庫實現。html2canvas會對預覽區的圖片進行截圖，並回傳截圖結果，確保用戶最終得到的圖片與預覽區顯示一致。

功能區

功能區包含兩個按鈕，分別提供下載圖片與分享圖片的功能。

當使用者點擊「下載」按鈕時，上述html2canvas函式庫會對預覽區顯示的圖片截圖，並下載該截圖至使用者本地磁碟。

當使用者點擊「分享」按鈕時，代表圖片地址的URL會顯示在下方，使用者可複製此連結並將圖片URL放置於需要的位置，藉此分享圖片給他人，而無需下載。當然，該圖片與預覽區顯示的完全相同。

圖片分享功能涉及後端伺服器部分，主要使用Express.js框架實作。首先，我們需將預覽區圖片的所有參數以URL形式傳給後端，這裡我使用axios函式庫。在後端，我使用路由接收前端傳來的URL並解析各參數。接著，我利用canvas函式庫根據這些參數繪製與前端一致的圖片。如此，我們成功在後端生成了使用者的圖片。

由於繪製時需載入使用者選擇的模板，我們必須先將所有模板上傳至後端伺服器的靜態資源。整個專案是以create-blocklet範本建立，因此可將這些圖片儲存於Blocklet的data_dir路徑。同理，後端成功生成使用者所需圖片後，可將圖片寫入data_dir並掛載於assets路徑下。最後，只需將該圖片的路徑/URL回傳給前端即可。

Git Repo 與 Blocklet Store

歡迎試用或fork並改進成真正的產品。

Github：https://github.com/dnfisreal/image-generator

Blocklet Store：https://test.store.blocklet.dev/blocklets/z8ia3a66nQ7eqpSbj37cZj6qNnsmMsuUkATmP

致謝

這是對此圖片產生器的整體介紹。在這將近三個月的實習期間，我很高興完成了一個Blocklet，也從中學到了許多在學校難以接觸到的知識。

再次感謝ArcBlock給予我這個機會！