Press "Enter" to skip to content

A Full-Featured Photo Editor Using Canvas | tui.image-editor

Toast UI Image Editor is a full-featured image editor that uses HTML5 Canvas. It is easy to use and provides powerful filters.

tui.image-editor is a powerful, customizable, customizable, and easy-to-use image editor for mobile (with image filters) powered by JavaScript.

🎨 Features

  • Load image to canvas
  • Undo/Redo (With shortcut)
  • Crop
  • Flip
  • Rotation
  • Free drawing
  • Line drawing
  • Shape
  • Icon
  • Text
  • Mask Filter
  • Image Filter

How to make use of it:

Install the tui.image-editor with NPM.

# NPM
$ npm install tui.image-editor --save

Or embody the mandatory files from a CDN.

<link rel="stylesheet" href="/path/to/tui-image-editor.css">
<script src="/path/to/tui-image-editor.js"></script>

Create a container factor for the picture editor.

<div id="tui-image-editor"></div>

Initialize the picture editor.

var ImageEditor = require('tui-image-editor');
var myEditor = new ImageEditor(document.querySelector('#tui-image-editor'), {
    // optons here
});

Customization choices for the picture editor.

var myEditor = new ImageEditor(document.querySelector('#tui-image-editor'), {
    includeUI: {
      loadImage: {
        path: 'img/sampleImage.jpg',
         name: 'SampleImage'
      },
      theme: blackTheme, // or whiteTheme
      menu: ['shape', 'filter'],
      initMenu: 'filter',
      menuBarPosition: 'bottom'
    },
    cssMaxWidth: 700,
    cssMaxHeight: 500,
    selectionStyle: {
      cornerSize: 20,
      rotatingPointOffset: 70
    }
});

Powerful Canvas-Based Image Editor, Toast UI Plugin/Github


See Demo And Download

Official Website(nhn): Click Here

This superior jQuery/javascript plugin is developed by nhn. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *