TUI image editor dynamic images

Question

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?

Answer 1

I had a similar issue, you need to re-enable the menu by calling ui.activeMenuEvent(). So applying the changes to your code it would look like this

$(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},
             });
                 instance.ui.activeMenuEvent();
             console.log(result);
         }).catch(err=>{
             console.error("Something went wrong:", err);
         })
  });

});