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

Category: Image , Javascript , Recommended | October 20, 2021
Author:nhnent
Views Total:571 views
Official Page:Go to website
Last Update:October 20, 2021
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
  • Zoom in
  • Zoom out
  • Move

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
    }
});

Changelog:

v3.15.2 (10/20/2021)

  • tui-code-snippet is included in the tui-code-snippet package.

v3.15.0 (07/28/2021)

  • Update

v3.14.3 (04/08/2021)

  • Fixed: removes the object when editing hex inputs of the color picker
  • Fixed: not uncheck filter’s checkbox when reset image

v3.14.2 (03/25/2021)

  • Fixed: unable to press space key in the text box outside the image-editor
  • Fixed: not work space key when vue image-editor component loaded

v3.14.1 (03/18/2021)

  • Fixed: Text control exits when space key pressed

v3.14.0 (03/08/2021)

  • add zoom&pan features

v3.13.0 (03/05/2021)

  • Update

v3.12.0 (02/22/2021)

  • Bugfix

v3.11.0 (12/09/2020)

  • add undo stack of object resize/move
  • update fabric.js
  • add icon drawing mode
  • Enhancement
  • bug-fix

You Might Be Interested In:


Leave a Reply