(開源)兩個週末寫了個圖片編輯器

前言

今年計劃開始寫文章，各大平臺發佈的時候需要上傳一個封面圖，市面上有好多比較成熟的圖片編輯器。之前也做過一些偏工具類的應用，於是萌生想法，自己能不能搞一個編輯器，供掘友們使用，大概花了四五天的時間，第一版內容已經有了。

案例演示

演示地址

演示地址

快速啓動

• git clone [email protected]:jiechud/fast-image-editor.git
• yarn install || npm install
• yarn dev 啓動服務
• 打開瀏覽器

項目目錄

.
├── canvas-components  
│   ├── canvas         //畫布組件
│   ├── layout         //頁面佈局
│   ├── shape-panel    // 右側面板
│   └── transformer-wrapper // 支持transformer高階組件
├── components
│   ├── color-select   // 顏色選擇器
│   ├── context-menu   // 右鍵菜單
│   ├── image          // 圖片
│   ├── text           // 文本
│   ├── text-input     // 文本輸入
│   └── toolbar        // 導航
├── enum.ts
├── global.css
├── hooks
│   └── useImage.tsx  // 圖片kooks
├── models1           // 狀態管理
│   ├── canvasDataModel.ts
│   └── canvasModel.ts
├── pages
│   ├── index.less
│   └── index.tsx
├── styles
│   ├── index.less
│   └── theme
├── typing.ts
└── utils
    └── util.ts

功能特性

目前主要實現了簡單的圖片編輯，支持文字，圖片等。

已支持的功能列表

• [x] layout佈局
• [x] 文字編輯組件
• [x] 圖片編輯組件
• [x] 畫布放大縮小
• [x] 畫布右鍵菜單
• [x] 圖片下載
• [x] 背景圖支持

待實現的功能列表

• [ ] 工具類操作支持上一步下一步
• [ ] 圖形組件
• [ ] 標記組件
• [ ] 畫布多個元素組合
• [ ] 文字組件增加，字體豐富，透明度等。
• [ ] 畫布參考線
• [ ] 畫布多個尺寸，支持多平臺
• [ ] 接入後臺，實現登錄，保存模板

項目架構

項目用React umi開發框架，採用typescript編寫，圖片編輯功能用的是react-konva,考慮後期可能核心的編輯功能整體做成一個組件，所以沒有umi裏提供的useModel去做狀態處理，採用的是flooks。

技術棧

技術	說明	官網
typescript	JavaScript 的一個超集,支持 ECMAScript 6	https://www.tslang.cn/
umi	插件化的企業級前端應用框架。	https://umijs.org/zh-CN
react-konva	用於使用React繪製複雜的畫布圖形 。	https://github.com/konvajs/react-konva
immer	創建不可變數據	https://immerjs.github.io/immer/docs/introduction
flooks	一個 React Hooks 狀態管理器，支持驚人的 re-render 自動優化	https://github.com/nanxiaobei/flooks
ahooks	提供了大量自應用的高級 Hooks	https://github.com/alibaba/hooks
react-color	一個React顏色選擇器	https://github.com/casesandberg/react-color

聯繫我

建立了一個微信交流羣，如需溝通討論，請加入。

二維碼過期，請添加微信號q1454763497,備註image editor,我會拉你進羣

地址

• 演示地址
• 代碼地址

總結

大家可以嘗試一下，有bug可以提issues，我會第一時間修復.

大家覺得有幫助，請在github幫忙star一下。