Редактор изображений ToastUI loadImageFromURL не работает - PullRequest
Новая
       65

Редактор изображений ToastUI loadImageFromURL не работает

0 голосов
/ 12 января 2019

Обратите внимание, что это вопрос с ответом.

Этот вопрос касается ToastUI Image Editor v3.3.0, но он также может применяться к более новым версиям.

Когда вы загружаете изображение, используя этот официальный пример : 

// Create image editor
var imageEditor = new tui.component.ImageEditor('#my-image-editor canvas', {
    cssMaxWidth: 1000, // Component default value: 1000
    cssMaxHeight: 800  // Component default value: 800
});

// Load image
imageEditor.loadImageFromURL('img/sampleImage.jpg', 'My sample image')

Редактор не будет загружать изображение. Функция не выдает и не возвращает ничего, что указывает на ошибку, и вы не получаете никаких сообщений об ошибках. Он возвращает обещание, которое разрешается, как указано в документации.

Он загружает только изображение, указав его в исходной конфигурации, и вы не можете изменить его впоследствии: 

// Create image editor
var imageEditor = new tui.component.ImageEditor('#my-image-editor canvas', {
     includeUI: {
         loadImage: {
             path: 'img/sampleImage.jpg',
             name: 'My sample image'
         },
     },
    cssMaxWidth: 1000, // Component default value: 1000
    cssMaxHeight: 800  // Component default value: 800
});

Похоже, что функция loadImageFromURL не работает и, по мнению других пользователей, loadImageFromFile имеет такую ​​же проблему.

Вопросы об этом были подняты на GitHub, но в основном были проигнорированы. Прошел уже месяц, и, к сожалению, он до сих пор не исправлен.

Таким образом, вопрос заключается в том, как можно заставить редактор изображений работать, пока существует эта проблема.

Вот скрипка, показывающая, что она не работает: https://fiddle.sencha.com/#view/editor&fiddle/2org

1 Ответ

0 голосов
/ 12 января 2019

TL; DR:
Вот рабочая скрипка: https://fiddle.sencha.com/#view/editor&fiddle/2p0o

Длинная версия:

Есть четыре проблемы:

  • Вам необходимо загрузить исходное изображение, иначе вы не сможете использовать элементы управления для редактирования.
  • Вам нужно подождать, пока объект редактора изображений не будет готов, прежде чем вызывать loadImageFromURL, в противном случае вы можете получить сообщение об ошибке или тихий сбой
  • Когда изображение загружено, вам нужно сообщить редактору изображений новый размер, иначе изображение будет скрыто или имеет неправильный размер.
  • Если вы загружаете внешнее изображение, внешний сервер должен установить заголовок Access-Control-Allow-Origin и явно разрешить доступ к нему вашего домена, в противном случае редактор изображений не сможет получить к нему доступ.

Эту первую проблему можно решить, загрузив пустое изображение, например: 

var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
    includeUI: {
        loadImage: {
            path: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
            name: 'Blank'
        },
        theme: whiteTheme,
        menuBarPosition: 'bottom'
    },
    cssMaxWidth: 700,
    cssMaxHeight: 700
});

Вторую проблему можно решить, подождав, пока редактор изображений выйдет из состояния блокировки с помощью недокументированных функций. Вы можете исправить ваш loadImageFromURL во время выполнения, например: 

imageEditor.loadImageFromURL = (function() {
    var cached_function = imageEditor.loadImageFromURL;
    function waitUntilImageEditorIsUnlocked(imageEditor) {
        return new Promise((resolve,reject)=>{
            const interval = setInterval(()=>{
                if (!imageEditor._invoker._isLocked) {
                    clearInterval(interval);
                    resolve();
                }
            }, 100);
        })
    }
    return function() {
        return waitUntilImageEditorIsUnlocked(imageEditor).then(()=>cached_function.apply(this, arguments));
    };
})();

Третью проблему можно решить, взяв объект, который решает обещание, возвращаемое loadImageFromURL, и передав новые и старые свойства width / height в функцию ui.resizeEditor следующим образом: 

imageEditor.loadImageFromURL("https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/526px-Wikipedia-logo-v2.svg.png", "SampleImage").then(result=>{
    imageEditor.ui.resizeEditor({
        imageSize: {oldWidth: result.oldWidth, oldHeight: result.oldHeight, newWidth: result.newWidth, newHeight: result.newHeight},
    });
}).catch(err=>{
    console.error("Something went wrong:", err);
})

Четвертая проблема может быть немного запутанной. Позволь мне объяснить. На веб-сайтах вы можете включить практически любое внешнее изображение, которое хотите, используя тег <img>, но если вы хотите получить доступ к внешнему изображению с помощью JavaScript, сервер, предоставляющий изображение, должен явно разрешить вам сделать это с помощью access-control-allow-origin заголовок. Например, в Amazon S3 серверы не разрешают это по умолчанию. Вы должны вручную настроить сервер, чтобы разрешить доступ к нему вашему или любому домену. Смотрите здесь . Если вы используете другой сервер, вы можете, например, установить access-control-allow-origin в *, как это сделала википедия для этого изображения . Тогда вы (и редактор изображений) можете получить доступ к этому изображению из JavaScript любого домена.

...