Обратите внимание, что это вопрос с ответом.
Этот вопрос касается 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
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 любого домена.