Powerful Canvas-Based Image Editor – tui.image-editor

Category: Image , Javascript , Recommended | July 15, 2018
Author: nhnent
Views Total: 3,161
Official Page: Go to website
Last Update: July 15, 2018
License: MIT

Preview:

Powerful Canvas-Based Image Editor – tui.image-editor

Description:

tui.image-editor is a powerful, customizable, themeable, mobile-friendly image editor (with image filters) powered by JavaScript and HTML5 canvas.

Based on the fabric.js canvas library.

Operations supported:

  • Crop
  • Flip
  • Rotation
  • Drawing
  • Shape
  • Icon
  • Text
  • Mask Filter
  • Image Filter
  • Download
  • Image Load
  • Undo
  • Redo
  • Reset
  • Delete Object

Image Filters included:

  • Grayscale
  • Invert
  • Sepia
  • Blur Sharpen
  • Emboss
  • RemoveWhite
  • GradientTransparency
  • Brightness
  • Noise
  • Pixelate
  • ColorFilter
  • Tint
  • Multiply
  • Blend

How to use it:

Install the tui.image-editor with NPM.

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

Or include the necessary 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 element for the image editor.

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

Initialize the image editor.

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

Customization options for the image editor.

  • includeUI: Use the provided UI
  • includeUI.loadImage: Basic editing image
  • includeUI.loadImage.path: image path
  • includeUI.loadImage.name: image name
  • includeUI.theme: Theme object
  • includeUI.menu: It can be selected when only specific menu is used. [default all]
  • includeUI.initMenu: The first menu to be selected and started.
  • includeUI.menuBarPosition: Menu bar position [top | bottom | left | right]
  • cssMaxWidth: Canvas css-max-width
  • cssMaxHeight: Canvas css-max-height
  • usageStatistics: Let us know the hostname. If you don’t want to send the hostname, please set to false.
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
    }
});

You Might Be Interested In:


Leave a Reply