javascript - TUI图像编辑器动态图像

Question

我遇到了 TUI 图像编辑器的问题，在使用 loadImageFromURL 函数后按钮不起作用。

目前，我使用以下脚本从 TUI 编辑器下的图库加载图像，第一张图像除外:

我的初始化

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

我选择其他图片的脚本:

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

});

现在，奇怪的是，图像加载正常。但是按钮什么都不做。如果我突出显示旋转按钮，它会显示“旋转”的帮助弹出窗口，但实际上不会执行任何操作。

加载图像时是否必须以某种方式重置 Canvas ？

Answer 1

我遇到了类似的问题，您需要通过调用 ui.activeMenuEvent() 重新启用菜单。所以将更改应用到您的代码中，它看起来像这样

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

});