如何加载动态图像tui图像编辑器

Question

大家好，

我使用的是tui图片编辑器npm。我想用动态图像在引导程序模型中打开我的编辑器。

我得到了这个错误的

访问位于"的图像https://bucke_test.s3.amazonaws.com/5e4cf329adb6054a45a8203a/REN_3018.jpg'来自原点'http://localhost:3000'已被CORS策略阻止：请求的资源上不存在"Access Control Allow Origin"标头。原点'http://localhost:3000因此不允许访问。webpack://tui.ImageEditor/./src/js/invoker.js?:214未捕获(在promise中(正在执行的命令状态已锁定。

我已经在我的s3 bucket上设置了cors权限。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration> 
<i className="fa fa-pencil cursor-pointer" aria-hidden="true" onClick={(e)=> this.openImageEditorModel("dynamicimageurl")}></i>
openImageEditorModel = (imageURL) =>{
document.getElementById("openImageEditor").click();
imageEditor = new ImageEditor('#tui-image-editor', {
includeUI: {
loadImage: {
path: imageURL,
name: 'Blank'
},
uiSize: {
width: '900px',
height: '500px'
},
theme: blackTheme,
menu: ['draw', 'text'],
initMenu: 'draw',
me[![enter image description here][1]][1]nuBarPosition: 'right'
},
cssMaxWidth: 600,
cssMaxHeight: 400
});
imageEditor.loadImageFromURL(imageURL, 'My sample image')
}

Answer 1

也许您可以尝试在chrome浏览器中安装此扩展。我试过了，它在本地主机环境上工作

允许CORS：访问控制允许来源。https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

Answer 2

不幸的是，您已经发现，如果标准浏览器违反了为其提供服务的服务器的CORS策略，则不会允许您以任何有意义的方式访问图像数据。TUI图像编辑器无法修复此问题。

你有两个选择：

1. 如果您控制图像服务器(buke_test.s3.amazonaws.com(，那么您应该能够将Access control Allow Origin标头设置为适当的值。以下是您需要为S3特别遵循的说明。对于其他服务器/服务，请使用带有服务器名称的标头进行搜索。

2. 如果您不控制图像服务器，而是控制自己的服务器或服务器端web应用程序，请设置一个HTTP端点来反向代理图像服务器。这样，远程映像将看起来是从您的源加载的，映像服务器的CORS策略不会影响您。我不知道你的应用程序使用的是什么服务器，但所有标准的web服务器和web应用程序框架都应该能够代理请求。只要小心并锁定终点，这样它就不会被滥用。