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

Question

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

1

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

Этот вопрос касается 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

Forivin 12 янв. 2019, в 00:39

Источник

Теги:

javascript

1 ответ

Ещё вопросы

Forivin · Answer 1 · 2019-01-11T21-00-00.000Z

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

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

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

Вам нужно загрузить исходное изображение, иначе вы не сможете использовать элементы управления редактированием.
Вам нужно подождать, пока объект редактора изображений не будет готов, прежде чем вызывать loadImageFromURL, в противном случае вы можете получить сообщение об ошибке или сбой без 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 любого домена.