Giter VIP home page Giter VIP logo

fast-image-editor's Introduction

Welcome to fast-image-editor 👋

Version Documentation Maintenance License: MIT

一块开源图片编辑器,采用React+Typescript+React-Konva开发。

示例图

Install

yarn install

Usage

yarn run start

Run tests

yarn run test

项目目录

.
├── 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

功能特性

目前主要实现了简单的图片编辑,支持文字,图片等。

已支持的功能列表

  • layout布局
  • 文字编辑组件
  • 图片编辑组件
  • 画布放大缩小
  • 画布右键菜单
  • 图片下载
  • 背景图支持

待实现的功能列表

  • 工具类操作支持上一步下一步
  • 图形组件
  • 标记组件
  • 画布多个元素组合
  • 文字组件增加,字体丰富,透明度等。
  • 画布参考线
  • 画布多个尺寸,支持多平台
  • 接入后台,实现登录,保存模板

系列文章

项目架构

项目用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,我会拉你进群

Author

👤 杰出D

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2021 杰出D.
This project is MIT licensed.


This README was generated with ❤️ by readme-md-generator

fast-image-editor's People

Contributors

wizard-a avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.