@sabinayakc/tui-image-editor

1.0.9 • Public • Published

Fork of Tui-Image-Editor

npm install @sabinayakc/tui.image-editor

Added Functionalities

  • Zoom
  • Pan
  • Undo/Redo Data
  • Arrow Shape
  • Resize

Zoom

setZoom(value: number, reset: boolean = false);

  • value > 1 & value < n
  • reset = true (resets zoom and transform)

Pan

  • Listen to image panned event.
imageEditor.on(
    imagePanned: (pan) => { 
        if (pan.x) {
          //If Pan.X is true, this means the width of image is not inside pan boundary
        }
        if (pan.y) {
          //If Pan.Y is true, this means the height of image is not inside pan boundary
        }
      }
   );
  • Hold Shift Key + Mouse Drag (Zoom must be greater than 1) to pan the image.

Undo/Redo Data

imageEditor.undo().then(undoData => console.log(undoData)); imageEditor.redo().then(redoData => console.log(redoData));

  • Useful for updating UI to last redo or undo change.

Arrow Shape

  • New arrow shape type. imageEditor.setDrawingShape('arrow');
  • To create an arrow, click on the canvas to create the arrow orign and drag the mouse to where you want the arrow to point.

Resize

imageEditor.resize({width: 640, height : 480})

  • Listen to image resized event imageEditor.on(imageResized: img => console.log('Resized image', img));

Package Sidebar

Install

npm i @sabinayakc/tui-image-editor

Weekly Downloads

0

Version

1.0.9

License

MIT

Unpacked Size

2.02 MB

Total Files

288

Last publish

Collaborators

  • sabinayakc