建站
咨詢
售后
建站咨詢
新聞中心
自從我上次分享一個(gè)人開(kāi)發(fā)仿造稿定設(shè)計(jì)的圖片編輯器到現(xiàn)在，不知不覺(jué)已過(guò)去一年時(shí)間了，期間我經(jīng)歷了裁員失業(yè)、面試找工作碰壁，寒冬下一直沒(méi)有很好地履行計(jì)劃.....這些就放在日后談吧。
站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到沙縣網(wǎng)站設(shè)計(jì)與沙縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋沙縣地區(qū)。
最近擠出時(shí)間來(lái)完善了這個(gè)項(xiàng)目，正式開(kāi)源后在一天內(nèi)就收獲了上百個(gè)Star，今天想向大家分享下這個(gè)開(kāi)源圖片編輯器項(xiàng)目——迅排設(shè)計(jì)，以及我的一些感悟和開(kāi)源體驗(yàn)。
項(xiàng)目速覽
git clone https://github.com/palxiao/poster-design.git
cd poster-design
npm run prepared # 快捷安裝依賴指令
npm run serve # 本地運(yùn)行將同時(shí)運(yùn)行前端界面與圖片生成服務(wù)(3000與7001端口)，合成圖片時(shí)本地會(huì)啟動(dòng)一個(gè)Chrome瀏覽器實(shí)例。
下面一起來(lái)看下都有些什么功能吧。
上傳 PSD 模板
點(diǎn)擊 “我的” - “資源管理”，上傳PSD模板按鈕，進(jìn)入PSD解析上傳界面[4]界面。選擇或拖入 PSD 文件，等待解析完成后開(kāi)始編輯，調(diào)整好模板后點(diǎn)擊右上角“上傳模板”，等待完成。
上傳完成后點(diǎn)擊查看作品即可打開(kāi)模板，之后在 “我的作品” 中可以找到該模板。
線上為功能測(cè)試，資源將被上傳到 Github，并使用 jsdelivr 作為 CDN 節(jié)點(diǎn)訪問(wèn)，這在某些網(wǎng)絡(luò)條件下可能會(huì)體驗(yàn)不佳，請(qǐng)確認(rèn)你的網(wǎng)絡(luò)環(huán)境，必要時(shí)科學(xué)上網(wǎng)。
由于服務(wù)器在國(guó)內(nèi)，生成下載圖片可能會(huì)圖裂，這不是BUG。
AI 摳圖
上傳需要去除背景的圖片，自動(dòng)摳除背景。在線體驗(yàn)[5]
以上在線體驗(yàn)效果Demo所分配的服務(wù)器資源僅1核1G內(nèi)存，可以看到應(yīng)付簡(jiǎn)單摳圖場(chǎng)景還是不錯(cuò)的，后續(xù)我會(huì)另開(kāi)一篇文章介紹如何部署，感興趣的話提前關(guān)注不迷路~
編輯與設(shè)計(jì)
快捷鍵
? 保存：Ctrl / Command + S
? 復(fù)制（選中元素）：Ctrl / Command + C
? 粘貼：Ctrl / Command + V
? 多選：按住 Shift 或 Ctrl / Command 然后鼠標(biāo)點(diǎn)選
? 組合成組（多選時(shí)）：Ctrl / Command + G
文字
畫布中雙擊內(nèi)容，編輯文字，修改顏色，原生吸色器（Chrome）：
圖片
除了拖拽縮放圖片大小，也可對(duì)圖像內(nèi)容進(jìn)行縮放裁剪，裁剪通常用于截取顯示原圖像的一部分：
支持拖動(dòng)圖片放置到一個(gè)容器中顯示：
圖層
圖層面板中可隨意拖動(dòng)元素快速改變層級(jí)，圖層鎖定后將固定在畫布中，此時(shí)元素變得不可移動(dòng)，再次點(diǎn)擊按鈕即可解鎖：
標(biāo)尺
從標(biāo)尺欄中拖出輔助線，按住線段拖回標(biāo)尺欄中刪除輔助線
項(xiàng)目架構(gòu)
編輯界面就不多說(shuō)了，就是對(duì)著稿定設(shè)計(jì)來(lái)，主要說(shuō)說(shuō)在保存時(shí)的操作，實(shí)際保存的是兩段JSON內(nèi)容：
其中 Page 是整個(gè)頁(yè)面的 Schema，而 Widgets 則是扁平化的數(shù)組，代表著整個(gè)頁(yè)面中的元素集合，拍平是為了高效直觀地實(shí)現(xiàn)層級(jí)以及查找組件。
保存這些 JSON 后，在繪制頁(yè)面請(qǐng)求這些信息，然后將頁(yè)面呈現(xiàn)出來(lái)，繪制頁(yè)移除了畫布操作、屬性菜單面板等編輯頁(yè)才有的功能，只保留了基礎(chǔ)組件的引入（如果有充足開(kāi)發(fā)成本理論上可嘗試采用 SSR 進(jìn)一步提升速度），并通過(guò)一系列方法判斷字體、圖片、SVG等元素是否加載完畢，一旦整個(gè)頁(yè)面以及資源都加載完成則調(diào)用 window 下的廣播通知開(kāi)始截圖。
在服務(wù)端，我們使用 puppeteer 啟動(dòng)無(wú)頭瀏覽器，在 Chrome 中打開(kāi)繪制頁(yè)，并往其 BOM 中注入廣播通知方法，這樣就完成了整個(gè)圖片生成操作的閉環(huán)。
技術(shù)棧概括
前端：Vue3 、Vite2 、Vuex 、ElementPlus
圖片生成：Puppeteer、Express
服務(wù)端：Node.js
一些可獨(dú)立的功能會(huì)被抽取出來(lái)作為單獨(dú)的庫(kù)引入使用。
組件庫(kù) Github 地址：https://github.com/palxiao/front-end-arsenal
前端目錄詳解
/src
├── App.vue
├── api // 請(qǐng)求接口管理
├── assets
| ├── data // 數(shù)據(jù)資源
| ├── fonts // 本地字體資源
| └── styles // CSS 樣式文件
├── common // 存放一些公共方法，例如上傳下載、彈窗提示等
| ├── hooks
| └── methods
├── components
| ├── business // 放置業(yè)務(wù)組件
| | ├── cropper // 裁剪（暫時(shí)棄用）
| | ├── image-cutout // 摳圖
| | ├── moveable // 操作插件
| | ├── picture-selector // 照片庫(kù)彈窗選擇
| | ├── qrcode // 二維碼插件
| | ├── right-click-menu // 右鍵菜單
| | └── save-download // 保存下載彈窗
| ├── common // 公共組件
| | ├── PopoverTip.vue // 氣泡提示組件
| | ├── ProgressLoading // 百分比進(jìn)度條
| | └── Uploader // 上傳組件
| └── modules // 核心模塊
| ├── index.ts
| ├── layout
| | ├── designBoard.vue // 主界面
| | ├── lineGuides.vue // 網(wǎng)格（棄用，由moveable提供輔助線功能）
| | ├── sizeControl.vue // 元素操作組件（棄用，由moveable代理）
| | └── zoomControl.vue // 縮放畫布
| ├── panel // 該目錄下的所有文件自動(dòng)導(dǎo)入項(xiàng)目中
| | ├── components
| | ├── stylePanel.vue // 右側(cè)屬性編輯面板
| | ├── widgetPanel.vue // 左側(cè)功能菜單面板
| | └── wrap
| | ├── BgImgListWrap.vue // 背景選擇面板
| | ├── PhotoListWrap.vue // 照片面板
| | ├── TempListWrap.vue // 模板列表
| | ├── ToolsListWrap.vue // 工具面板
| | ├── UserWrap.vue // 我的資源作品面板
| | ├── GraphListWrap.vue // 素材面板
| | ├── CompListWrap.vue // 組合列表（目前主要是文字組合）
| | └── TextListWrap.vue // 文字面板
| ├── settings // 放置操作面板下的一些組件
| | ├── EffectSelect // 效果選擇（未開(kāi)發(fā)）
| | ├── colorSelect.vue // 顏色選擇
| | ├── iconItemSelect.vue // icon選擇
| | ├── numberInput.vue // 數(shù)字輸入
| | ├── numberSlider.vue // 數(shù)字拖拉
| | ├── textInput.vue // 文字輸入
| | ├── textInputArea.vue // 文字域輸入
| | └── valueSelect.vue // 下拉選擇
| └── widgets // 該目錄下的所有文件自動(dòng)導(dǎo)入項(xiàng)目中
| ├── pageStyle.vue // 背景/頁(yè)面設(shè)置
| ├── wGroup // 組合
| | ├── wGroup.vue
| | └── wGroupStyle.vue // 對(duì)應(yīng)右側(cè)面板的操作
| ├── wImage // 圖片
| | ├── components
| | | └── innerToolBar.vue
| | ├── wImage.vue
| | └── wImageStyle.vue // 對(duì)應(yīng)右側(cè)面板的操作
| ├── wQrcode // 二維碼
| | ├── wQrcode.vue
| | └── wQrcodeStyle.vue // 對(duì)應(yīng)右側(cè)面板的操作
| ├── wSvg // 矢量圖
| | ├── wSvg.vue
| | └── wSvgStyle.vue // 對(duì)應(yīng)右側(cè)面板的操作
| └── wText // 文字
| ├── wText.vue
| └── wTextStyle.vue // 對(duì)應(yīng)右側(cè)面板的操作
├── config.ts // 公共配置
├── main.ts // 項(xiàng)目入口文件
├── mixins // 一些公共混合代碼，考慮優(yōu)化
| ├── methods
| | ├── DealWithCtrl.ts
| | └── keyCodeOptions.ts
| ├── mouseDragging.ts
| ├── move.ts
| └── shortcuts.ts
├── router // vue 路由
| ├── .....
├── store // Vuex 狀態(tài)管理器
| ├── index.ts
| └── modules
| ├── base
| | ├── .......
| └── design
| ├── .......
├── types // TS類型配置
| ├── .......
├── utils // 工具函數(shù)目錄
| ├── axios.ts
| ├── index.ts
| ├── plugins
| | ├── cssLoader.ts // 異步加載css
| | ├── modules.ts // 全局加載公共組件
| | ├── pointImg.ts // 圖片點(diǎn)位顏色，測(cè)試中
| | ├── preload.ts // 加載資源
| | └── psd // 設(shè)計(jì)稿解析
| ├── utils.ts
| └── widgets
| └── elementConfig.ts // 配置全局默認(rèn)導(dǎo)入的element組件
└── views // 頁(yè)面目錄
├── Draw.vue // 繪制頁(yè)
├── Index.vue // 編輯頁(yè)（首頁(yè)）
├── Psd.vue // PSD解析頁(yè)
└── components由于項(xiàng)目當(dāng)初開(kāi)發(fā)至一半時(shí)才改用 Vue3 重構(gòu)，所以有部分代碼混合了 Options 寫法，還請(qǐng)各位大佬不要笑話。
開(kāi)源感受
早在去年我于年中總結(jié)文章里分享這個(gè)項(xiàng)目后，就收到不少私信留言表示對(duì)項(xiàng)目感興趣，甚至有要花錢買源碼或商業(yè)化二次開(kāi)發(fā)的，我都回絕了。當(dāng)時(shí)我的想法是：這個(gè)項(xiàng)目能受到關(guān)注說(shuō)明一定是有價(jià)值的，那么就不應(yīng)該封閉起來(lái)！
與大多數(shù)程序員一樣，我開(kāi)始寫前端也是從一段段“膠水”代碼開(kāi)始的，遇到問(wèn)題的第一反應(yīng)就是打開(kāi)瀏覽器搜索，然后從各種問(wèn)答與筆記中抽絲剝繭式地嘗試解決問(wèn)題。
后來(lái)，代碼越寫越熟練，各種框架庫(kù)使用起來(lái)得心應(yīng)手，算得上是初窺門徑，有時(shí)甚至也能一個(gè)人扛起整個(gè)前端項(xiàng)目了。當(dāng)然，項(xiàng)目里通常也包含了幾十甚至上百個(gè)第三方依賴。
不必感到羞恥，這就是許多公司開(kāi)發(fā)的常態(tài)，技術(shù)細(xì)節(jié)的探索與學(xué)習(xí)是永無(wú)止境的，但無(wú)法保證效率的話，你可能會(huì)先丟掉飯碗，所有插件庫(kù)都手?jǐn)]，你可能一個(gè)項(xiàng)目都做不出來(lái)。
在我一開(kāi)始做這個(gè)項(xiàng)目的時(shí)候，沒(méi)有找到現(xiàn)成的開(kāi)源可以依貓畫虎，最后雖然寫完了整個(gè)項(xiàng)目，但也走了不少?gòu)澛?。所以我看到了?duì)項(xiàng)目關(guān)注的人，就仿佛看到了曾經(jīng)的自己，因此決定開(kāi)源，即使我代碼寫得再爛，興許也會(huì)有需要的人。
事實(shí)上，今年有人基于我的項(xiàng)目二次開(kāi)發(fā)，上線了公司內(nèi)部的編輯器：
有人正打算在公司的搭建器上增加類似的功能，特地加了我微信向我道謝：
雖然這些都不是我的產(chǎn)出成果，但他們至少不用踩我踩過(guò)的坑，留出更多的時(shí)間，可以去研究自己熱愛(ài)的東西，去實(shí)現(xiàn)自己某方面的技術(shù)追求，最終產(chǎn)出更多的輪子，前端的生態(tài)就會(huì)越來(lái)越好，所有人也就都能從中受益，這也是開(kāi)源的意義之一。
目前項(xiàng)目還在不斷完善中，可能有很多的不足之處，代碼寫得爛，我也是一邊學(xué)習(xí)一邊成長(zhǎng)。開(kāi)源不易，如果項(xiàng)目對(duì)你有幫助或啟發(fā)，可以點(diǎn)個(gè) Star 支持一下~ 感謝！
Github 倉(cāng)庫(kù)地址: https://github.com/palxiao/poster-design
鏈接
[1] 在線Demo: https://design.palxp.com/
[2] 文檔網(wǎng)站: https://xp.palxp.com/
[3] PSD解析上傳界面: https://design.palxp.com/psd
[4] AI摳圖在線體驗(yàn): https://design.palxp.com/home?koutu=1
新聞標(biāo)題：在線圖片編輯器，支持PSD解析、AI摳圖等
網(wǎng)站鏈接：http://fisionsoft.com.cn/article/dphdpii.html
