Skip to content

Amerlander/tui.image-editor

This branch is 2 commits ahead of, 3 commits behind sabinayakc/tui.image-editor:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

1521e5b · Nov 9, 2020
Mar 3, 2020
May 12, 2020
Mar 11, 2020
Apr 6, 2020
May 12, 2020
Mar 10, 2020
Aug 29, 2017
Mar 30, 2018
May 11, 2018
Dec 7, 2018
Aug 29, 2017
Apr 14, 2019
Apr 14, 2019
Aug 29, 2017
Apr 14, 2019
Nov 9, 2020
Feb 12, 2020
May 10, 2020
Apr 14, 2019
Mar 6, 2020
Dec 17, 2018
May 12, 2020
May 10, 2020
Jan 9, 2019
Jan 10, 2019
Jul 12, 2019
Mar 6, 2020

Repository files navigation

I added two things for my use additional to sabinayakcs changes (described below). Maybe it helps someone else too:

  • The Zoom gets back to 1 right before a cropping is applied. In my case the image got wrong resolution if the zoom was set to some else value.

  • I enabled the zoom to be less than 1. Was there any reason for not doing this?

My setup is as following:

  • I initialise TUI with full image size, so cssMaxWidth and cssMaxHeight is set to a never reached value like 100.000
  • This leads to a very big image and I usually only need to zoom out ( < 1).
  • The image is scrollable with scrollbars which indicate where I am. The Pan feature you introduced didnt worked well for me since the drawing tool always draws when paning with shift + mouse.

The Zoom is done by a input, a 1:1 and a 100% button (html uses fomantic ui):

<div class="ui action input"  style='position: absolute;    bottom: 12px;    z-index: 99;    left: 5px;'> 
    <input type="number" id='tui-zoom-input' min="1" max='1000' value="100" oninput="if(this.value >= 1){imageEditor.setZoom( (this.value / 100), false);}"> 
    <button class="ui button" onclick="$('#tui-zoom-input').val(100); imageEditor.setZoom(1, true);">1:1</button> 
    <button class="ui button" onclick="setInitialZoom();">auto</button> 
</div> 

The function setInitialZoom() is also called after tui is initialized and sets the zoom to fit the window and scrolls to the center:

function setInitialZoom() { 
    let zoom = $('.tui-image-editor-wrap').height() / $('.tui-image-editor-size-wrap').height(); 
    let zoom2 = $('.tui-image-editor-wrap').width() / $('.tui-image-editor-size-wrap').width(); 
    if(zoom2 < zoom) { 
        zoom = zoom2; 
    } 
    zoom = zoom * 100; 
    zoom = Math.floor(zoom); 
    $('#tui-zoom-input').val(zoom); 
    zoom = zoom / 100; 
    imageEditor.setZoom(zoom, false); 
 
    function centerVertical(){//centralize vertical 
        var scrollableDivJ=$(".tui-image-editor-wrap"); 
        scrollableDivJ.scrollTop("1000000");//scroll to max 
        var scrollHeight=scrollableDivJ.prop("scrollHeight"); 
       var diff=(scrollHeight-scrollableDivJ.scrollTop())/2; 
       var middle=scrollHeight/2-diff; 
       scrollableDivJ.scrollTop(middle); 
    } 
 
    function centerHorizontal(){//centralize horizontal 
        var scrollableDivJ=$(".tui-image-editor-wrap"); 
        scrollableDivJ.scrollLeft("1000000");//scroll to max 
        var scrollWidth=scrollableDivJ.prop("scrollWidth"); 
        var diff=(scrollWidth-scrollableDivJ.scrollLeft())/2; 
        var middle=scrollWidth/2-diff; 
        scrollableDivJ.scrollLeft(middle); 
    } 
 
    centerVertical(); 
    centerHorizontal(); 
 
} 

If this makes sense, then it might be an idea to merge this into the zoom function itself. I haven't done this, because its referencing dom objects which aren't created by tui. Maybe this PR doesn't make that much sense to you at all, but I just thought I'll share my implementation.

image


sabinayakcs readme of his fork:

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

About

Fork of tui-image-editor to add additional functionalities

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 94.8%
  • Stylus 4.0%
  • TypeScript 1.2%