TUI Image Editor Dynamic Images Button Problems

[mprythero]

Version

Most Recent

Development Environment

Firefox, Chrome, Windows, iOS

Current Behavior

I'm stuck on an issue with the TUI Image Editor where the buttons don't work after using the loadImageFromURL function.

Currently, I load images from a gallery beneath the TUI editor with the exception of the first image using the scripts below:

My initialization

window.onresize = function() {
             instance.ui.resizeEditor();
         }



            var instance = new tui.ImageEditor('#tui-image-editor', {
     includeUI: {
         theme: blackTheme, // or whiteTheme
         menu: ['rotate'],
         menuBarPosition: 'bottom'
     },
     loadImage: {
                     path: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
                     name: 'Blank'
                 },
    cssMaxWidth: 700,
    cssMaxHeight: 500,
    selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70
    }
});

            // Patch the loadImageFromURL of our tui instance instance:
         instance.loadImageFromURL = (function() {
             var cached_function = instance.loadImageFromURL;
             function waitUntilImageEditorIsUnlocked(instance) {
                 return new Promise((resolve,reject)=>{
                     const interval = setInterval(()=>{
                         if (!instance._invoker._isLocked) {
                             clearInterval(interval);
                             resolve();
                         }
                     }, 100);
                 })
             }
             return function() {
                 return waitUntilImageEditorIsUnlocked(instance).then(()=>cached_function.apply(this, arguments));
             };
         })();

 // Load an image and tell our tui imageEditor instance the new and the old image size:
         instance.loadImageFromURL("{{ url('/') }}{{Storage::url('manifests/'.$images->first()->name)}}", "SampleImage").then(result=>{
             instance.ui.resizeEditor({
                 imageSize: {oldWidth: result.oldWidth, oldHeight: result.oldHeight, newWidth: result.newWidth, newHeight: result.newHeight},
             });
         }).catch(err=>{
             console.error("Something went wrong:", err);
         })



        /*  instance.loadImageFromURL("{{ url('/') }}{{Storage::url('manifests/'.$images->first()->name)}}",'{{$images->first()->name}}').then(result => {
     console.log('old : ' + result.oldWidth + ', ' + result.oldHeight);
     console.log('new : ' + result.newWidth + ', ' + result.newHeight);
});*/

My script to select other images:

$(document).on('click', '.selectImage', function() {
    var path = $(this).data('path');
    $('#image_id').val($(this).data('image_id'));
    instance.clearObjects().then(() => {
            console.log('cleared');
            instance.loadImageFromURL("{{ url('/') }}"+path,'name').then(result=>{
             instance.ui.resizeEditor({
                 imageSize: {oldWidth: result.oldWidth, oldHeight: result.oldHeight, newWidth: result.newWidth, newHeight: result.newHeight},
             });
             console.log(result);
         }).catch(err=>{
             console.error("Something went wrong:", err);
         })
  });

});

Now, oddly enough, the images load fine. But the buttons don't do anything. If I highlight over the rotate button, it'll show a help popup of "Rotate" but won't actually do anything.

Do I have to reset the canvas somehow when loading the images?

Thanks!

Expected Behavior

Should be able to use buttons.

[jinwoo-kim-nhn]

The image size is too small, making it difficult to see the change.
1 x 1 image

[stale]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale]

This issue will be closed due to inactivity. Thanks for your contribution!

[amrit-citrusleaf]

Bump. Changing the images using imageEditor.loadImageFromURL() changes the image but the editor UI buttons does not work. The canvas size does change as per the loaded image.

[maxdimaz]

anyone has fixed this issue the button edit not working on loadurl

[FariJan]

Doesnt work either if using loadImageFromFile()

[MaciejKucia]

The issue is still there. Editor freezes