zoukankan      html  css  js  c++  java
  • (开源)两个周末写了个图片编辑器

    前言

    今年计划开始写文章,各大平台发布的时候需要上传一个封面图,市面上有好多比较成熟的图片编辑器。之前也做过一些偏工具类的应用,于是萌生想法,自己能不能搞一个编辑器,供掘友们使用,大概花了四五天的时间,第一版内容已经有了。

    案例演示

    local1222.gif

    演示地址

    演示地址

    快速启动

    • git clone git@github.com: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

    联系我

    建立了一个微信交流群,如需沟通讨论,请加入。

    image.png

    二维码过期,请添加微信号q1454763497,备注image editor,我会拉你进群

    地址

    总结

    大家可以尝试一下,有bug可以提issues,我会第一时间修复.

    大家觉得有帮助,请在github帮忙star一下。

  • 相关阅读:
    编写内核模块
    ubuntu安装虚拟磁带库mhvtl
    linux中断与异常
    jquery 强大表格插件 DataTables
    判断元素是否存时,使用isset会比in_array快得多
    MarkDown 语法
    接口测试、压力测试工具
    jquery 复制文本到剪切板插件(非 flash)
    fiddler抓包HTTPS请求
    php mongodb manager 查数据的各种姿势
  • 原文地址:https://www.cnblogs.com/qiaojie/p/15161401.html
Copyright © 2011-2022 走看看