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

前言

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

案例演示

演示地址

演示地址

快速啟動

• git clone [e-mail]: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一下。