一款基於Vue3實現的漂亮且功能強大的線上海報設計器

Java陈序员發表於2024-03-04
Vue

大家好，我是 Java陳序員。

我們在工作中經常需要設計各種各樣的圖片，海報、產品圖、文章圖片、影片/公眾號等。

我們可以選擇使用 PS 來設計圖片，但是有時候想快速完成任務，有沒有一款工具支援快速生成海報呢？

答案是有的，今天給大家介紹一款線上圖片（海報）設計器。

關注微信公眾號：【Java陳序員】，獲取開源專案分享、AI副業分享、超200本經典計算機電子書籍等。

專案介紹

poster-design —— 一款漂亮且功能強大的線上海報設計器、圖片編輯器、仿稿定設計。

適用於海報生成、電商產品圖、文章長圖、影片/公眾號封面等多種場景。

poster-design 基於 Vue3 + Vite2 + Vuex + ElementPlus 技術棧實現，使用 Puppeteer + Express 生成圖片。

poster-design 具有完善的基礎功能，頁面操作絲滑，互動細節豐富。使用服務端生成圖片，支援簡單的 AI 摳圖工具，可一鍵去除圖片背景。

功能特色：

  • 支援匯入 PSD 檔案解析成模板、線上匯出圖片下載。
  • 元素拖拽、組合、縮放、層級調整、對齊等操作。
  • 圖片素材插入、替換、裁剪，圖片容器等功能。
  • SVG 素材顏色、透明度編輯，文字花字組合。
  • 畫布自定義尺寸、滾輪縮放、自適應畫布
  • 吸附對齊、輔助引導線、標尺功能。
  • 鍵盤快捷鍵、右鍵選單快捷操作，複製刪除等常用操作。
  • 風格二維碼編輯，支援單色、漸變、自定義 logo 等。
  • 圖層操作，支援拖拽變更層級。
  • 顏色調色盤，原生級取色器顏色吸管（Chrome）。

專案地址：

https://github.com/palxiao/poster-design

線上體驗：

https://design.palxp.cn/home

功能體驗

1、多種模板選擇

2、文字圖層設計

3、豐富的素材庫

4、多種多樣的文字樣式

5、圖片庫

6、工具箱

本地部署

1、克隆程式碼

git clone https://github.com/palxiao/poster-design.git

2、安裝依賴

cd poster-design
npm run prepared

3、啟動服務

npm run serve
將會同時執行前端介面與圖片生成服務(3000埠為前端專案，7001埠為圖片生成服務)

4、瀏覽器訪問

http://127.0.0.1:3000/

最後

推薦的開源專案已經收錄到 GitHub 專案，歡迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者訪問網站，進行線上瀏覽：

https://chencoding.top:8090/#/
大家的點贊、收藏和評論都是對作者的支援，如文章對你有幫助還請點贊轉發支援下，謝謝！

相關文章