Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nhn/tui.image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
https://github.com/nhn/tui.image-editor

canvas drawing filter image image-editor paint photo photoshop

Last synced: 2 days ago
JSON representation

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

Host: GitHub
URL: https://github.com/nhn/tui.image-editor
Owner: nhn
License: mit
Created: 2016-04-28T01:50:33.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2023-11-20T10:48:41.000Z (about 1 year ago)
Last Synced: 2024-10-29T10:42:29.912Z (about 1 month ago)
Topics: canvas, drawing, filter, image, image-editor, paint, photo, photoshop
Language: JavaScript
Homepage: http://ui.toast.com/tui-image-editor
Size: 25.8 MB
Stars: 7,019
Watchers: 103
Forks: 1,296
Open Issues: 274
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-canvas - tui.image-editor - editor/latest/tutorial-example01-includeUi)] - 🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters. ![](https://img.shields.io/github/stars/nhn/tui.image-editor?style=social) ![](https://img.shields.io/github/forks/nhn/tui.image-editor?style=social) (Libraries / Image processing)
awesome-github-star - tui.image-editor - featured photo image editor using canvas. It is really easy, and it comes with great filters. | nhn | 6303 | (JavaScript)
made-in-korea - tui.image-editor
awesome-list - tui.image-editor - featured photo image editor using canvas. It is really easy, and it comes with great filters. | nhn | 4272 | (JavaScript)

README

        # ![Toast UI ImageEditor](https://user-images.githubusercontent.com/35218826/40895380-0b9f4cd6-67ea-11e8-982f-18121daa3a04.png)

> Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters.

[![github version](https://img.shields.io/github/release/nhn/tui.image-editor.svg)](https://github.com/nhn/tui.image-editor/releases/latest)

[![npm version](https://img.shields.io/npm/v/tui-image-editor.svg)](https://www.npmjs.com/package/tui-image-editor)

[![license](https://img.shields.io/github/license/nhn/tui.image-editor.svg)](https://github.com/nhn/tui.image-editor/blob/master/LICENSE)

[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/nhn/tui.image-editor/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)

[![code with hearth by NHN Cloud](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-NHN_CLOUD-ff1414.svg)](https://github.com/nhn)

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

## 📦 Packages

- [toast-ui.image-editor](https://github.com/nhn/tui.image-editor/tree/master/apps/image-editor

) - Plain JavaScript component implemented by [NHN Cloud](https://github.com/nhn).

- [toast-ui.vue-image-editor](https://github.com/nhn/tui.image-editor/tree/master/apps/vue-image-editor

) - **Vue** wrapper component is powered by [NHN Cloud](https://github.com/nhn).

- [toast-ui.react-image-editor](https://github.com/nhn/tui.image-editor/tree/master/apps/react-image-editor

) - **React** wrapper component is powered by [NHN Cloud](https://github.com/nhn).

![6 -20-2018 17-45-54](https://user-images.githubusercontent.com/35218826/41647896-7b218ae0-74b2-11e8-90db-d7805cc23e8c.gif)

## 🚩 Table of Contents

- [!Toast UI ImageEditor](#)

  - [📦 Packages](#packages)

  - [🚩 Table of Contents](#-table-of-contents)

  - [🌏 Browser Support](#-browser-support)

  - [💪 Has full features that stick to the basic.](#-has-full-features-that-stick-to-the-basic)

    - [Photo manipulation](#photo-manipulation)

    - [Integration function](#integration-function)

    - [Powerful filter function](#powerful-filter-function)

  - [🙆 Easy to apply the size and design you want](#-easy-to-apply-the-size-and-design-you-want)

    - [Can be used everywhere.](#can-be-used-everywhere)

    - [Nice default & Fully customizable Themes](#nice-default--fully-customizable-themes)

  - [🎨 Features](#-features)

  - [🔧 Pull Request Steps](#-pull-request-steps)

    - [Setup](#setup)

    - [Pull Request](#pull-request)

  - [📙 Documents](#-documents)

  - [💬 Contributing](#-contributing)

  - [🔩 Dependency](#-dependency)

  - [🍞 TOAST UI Family](#-toast-ui-family)

  - [🚀 Used By](#-used-by)

  - [📜 License](#-license)

## 🌏 Browser Support

|  Chrome |  Internet Explorer |  Edge |  Safari |  Firefox |

| :--------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------: |

|                                                                               Yes                                                                                |                                                                                   10+                                                                                   |                                                                             Yes                                                                              |                                                                               Yes                                                                                |                                                                                Yes                                                                                 |

## 💪 Has full features that stick to the basic.

### Photo manipulation

- Crop, Flip, Rotation, Drawing, Shape, Icon, Text, Mask Filter, Image Filter

### Integration function

- Download, Image Load, Undo, Redo, Reset, Delete Object(Shape, Line, Mask Image...)

    

        

            Crop

            Flip

            Rotation

            Drawing

            Shape

        

        

            

            

            

            

            

        

        

            Icon

            Text

            Mask

            Filter

            

        

        

            

            

            

            

            

        

    

### Powerful filter function

- Grayscale, Invert, Sepia, Blur Sharpen, Emboss, RemoveWhite, Brightness, Noise, Pixelate, ColorFilter, Tint, Multiply, Blend

| Grayscale                                                                                                          | Noise                                                                                                          | Emboss                                                                                                          | Pixelate                                                                                                          |

| ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |

| ![grayscale](https://user-images.githubusercontent.com/35218826/41753470-930fb7b0-7608-11e8-9966-1c890e73d131.png) | ![noise](https://user-images.githubusercontent.com/35218826/41753458-9013bc82-7608-11e8-91d9-74dcc3ffce31.png) | ![emboss](https://user-images.githubusercontent.com/35218826/41753460-906c018a-7608-11e8-8861-c135c0117cea.png) | ![pixelate](https://user-images.githubusercontent.com/35218826/41753461-90a614a6-7608-11e8-97a7-0d3b7bb4aec4.png) |

| Sepia                                                                                                          | Sepia2                                                                                                          | Blend-righten                                                                                                          | Blend-diff                                                                                                          | Invert                                                                                                          |

| -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |

| ![sepia](https://user-images.githubusercontent.com/35218826/41753464-91acc41c-7608-11e8-8652-572f935ea704.png) | ![sepia2](https://user-images.githubusercontent.com/35218826/41753640-91e57248-7609-11e8-8960-145e0de57e39.png) | ![blend-righten](https://user-images.githubusercontent.com/35218826/41753462-9114bc3a-7608-11e8-9ab4-16ce20a34321.png) | ![blend-diff](https://user-images.githubusercontent.com/35218826/41753465-91e4baf2-7608-11e8-9b8f-79e1b956d387.png) | ![invert](https://user-images.githubusercontent.com/35218826/41753466-9260b224-7608-11e8-848a-73231a02ae3a.png) |

| Multifly                                                                                                          | Tint                                                                                                          | Brightness                                                                                                          | Remove-white                                                                                                          | Sharpen                                                                                                          |

| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |

| ![multifly](https://user-images.githubusercontent.com/35218826/41753467-92baae28-7608-11e8-80d2-187a310213f5.png) | ![tint](https://user-images.githubusercontent.com/35218826/41753468-92e6391c-7608-11e8-8977-651366ebe693.png) | ![brightness](https://user-images.githubusercontent.com/35218826/41753457-8fb3d3c6-7608-11e8-9e1d-10c6e4aeba68.png) | ![remove-white](https://user-images.githubusercontent.com/35218826/41753463-917feeb0-7608-11e8-862d-eb3af84e120a.png) | ![sharpen](https://user-images.githubusercontent.com/35218826/41753639-91b8470a-7609-11e8-8d13-48ac3232365b.png) |

## 🙆 Easy to apply the size and design you want

### Can be used everywhere.

- Widely supported in browsers including IE10.

- Option to support various display sizes.

  (allows you to use the editor features on your web pages at least over **550 \* 450 sizes**)

  ![2018-06-04 5 35 25](https://user-images.githubusercontent.com/35218826/40907369-9221f482-681e-11e8-801c-78d6f2e246a8.png)

### Nice default & Fully customizable Themes

- Has a white and black theme, and you can modify the theme file to customize it.

- Has an API so that you can create your own instead of the built-in.

| black - top                                                                                                                 | black - bottom                                                                                                              | white - left                                                                                                                | white - right                                                                                                               |

| --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |

| ![2018-06-05 1 41 13](https://user-images.githubusercontent.com/35218826/40930753-8b72502e-6863-11e8-9cff-1719aee9aef0.png) | ![2018-06-05 1 40 24](https://user-images.githubusercontent.com/35218826/40930755-8bcee136-6863-11e8-8e28-0a6722d38c59.png) | ![2018-06-05 1 41 48](https://user-images.githubusercontent.com/35218826/40930756-8bfe0b50-6863-11e8-8682-bab11a0a2289.png) | ![2018-06-05 1 42 27](https://user-images.githubusercontent.com/35218826/40930754-8ba1dba0-6863-11e8-9439-cc059241b675.png) |

## 🎨 Features

- Load image to canvas

- Undo/Redo (With shortcut)

- Crop

- Flip

- Rotation

- Resize

- Free drawing

- Line drawing

- Shape

- Icon

- Text

- Mask Filter

- Image Filter

## 🔧 Pull Request Steps

TOAST UI products are open source, so you can create a pull request(PR) after you fix issues.

Run npm scripts and develop yourself with the following process.

### Setup

Fork `develop` branch into your personal repository.

Clone it to local computer. Install node modules.

Before starting development, you should check if there are any errors.

```sh

$ git clone https://github.com/{your-personal-repo}/[[repo name]].git

$ cd [[repo name]]

$ npm install

```

### Pull Request

Before uploading your PR, run test one last time to check if there are any errors.

If it has no errors, commit and then push it!

For more information on PR's steps, please see links in the Contributing section.

## 📙 Documents

- [Getting Started](https://github.com/nhn/tui.image-editor/tree/master/docs/Basic-Tutorial.md)

- [Tutorial](https://github.com/nhn/tui.image-editor/tree/master/docs)

- [Example](http://nhn.github.io/tui.image-editor/latest/tutorial-example01-includeUi)

- [API](http://nhn.github.io/tui.image-editor/latest)

## 💬 Contributing

- [Code of Conduct](https://github.com/nhn/tui.image-editor/blob/master/CODE_OF_CONDUCT.md)

- [Contributing guideline](https://github.com/nhn/tui.image-editor/blob/master/CONTRIBUTING.md)

- [Issue guideline](https://github.com/nhn/tui.image-editor/blob/master/ISSUE_TEMPLATE.md)

- [Commit convention](https://github.com/nhn/tui.image-editor/blob/production/docs/COMMIT_MESSAGE_CONVENTION.md)

## 🔩 Dependency

- [fabric.js](https://github.com/fabricjs/fabric.js/releases) = 4.2.0

- [tui.code-snippet](https://github.com/nhn/tui.code-snippet/releases/tag/v1.5.0) >= 1.5.0

- [tui.color-picker](https://github.com/nhn/tui.color-picker/releases/tag/v2.2.6) >= 2.2.6

## 🍞 TOAST UI Family

- [TOAST UI Editor](https://github.com/nhn/tui.editor)

- [TOAST UI Grid](https://github.com/nhn/tui.grid)

- [TOAST UI Chart](https://github.com/nhn/tui.chart)

- [TOAST UI Calendar](https://github.com/nhn/tui.calendar)

- [TOAST UI Components](https://github.com/nhn)

## 🚀 Used By

- [NHN Dooray! - Collaboration Service (Project, Messenger, Mail, Calendar, Drive, Wiki, Contacts)](https://dooray.com/home/)

- [Catalyst](https://catalystapp.co/)

## 📜 License

[MIT LICENSE](https://github.com/nhn/tui.image-editor/blob/master/LICENSE)