node.js - 如何加载动态图像 tui-image-editor？

问题描述

大家好，

我正在使用 tui-image-editor npm。我想用动态图像在引导模型中打开我的编辑器。

我遇到了这个错误

CORS 策略已阻止从源“ http://localhost:3000 ”访问“ https://bucke_test.s3.amazonaws.com/5e4cf329adb6054a45a8203a/REN_3018.jpg ”中的图像：否“Access-Control-Allow-Origin” ' 请求的资源上存在标头。因此，不允许访问源“ http://localhost:3000 ”。webpack://tui.ImageEditor/./src/js/invoker.js?:214 Uncaught (in promise) 执行命令状态被锁定。

我已经在我的 s3 存储桶中设置了 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')
        }

标签： node.jsreactjstoast-ui-image-editor

node.js - 如何加载动态图像 tui-image-editor？

问题描述

解决方案

推荐阅读