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

    






    





Top