How to load dynamic image tui-image-editor?

Question

hello All,

I am using tui-image-editor npm. I want to open my editor in bootstrap model with dynamic images.

I am getting this errer

Access to Image at 'https://bucke_test.s3.amazonaws.com/5e4cf329adb6054a45a8203a/REN_3018.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. webpack://tui.ImageEditor/./src/js/invoker.js?:214 Uncaught (in promise) The executing command state is locked.

I already set cors permission at my s3 bucket.

      <?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')
        }

A lot of people are facing this issue. That editor needs to make changes to it's code. — Omar Dulaimi, Jul 13 '21 at 09:11
This is not an issue with the editor but with how CORS works. — Tenders McChiken, Jan 06 '23 at 14:02

score 0 · Answer 1 · answered Nov 30 '21 at 09:10

Maybe you can try installing this extension in the chrome browser. I have tried it and it works on localhhost environment

Allow CORS: Access-Control-Allow-Origin. https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

score 0 · Answer 2 · answered Jan 06 '23 at 14:17

Unfortunately, you have jut discovered that standard browsers will not let you access image data in any meaningful way if it violates the CORS policy of the servers that served them. TUI Image Editor can't do anything to fix this.

You have two options:

If you control the image server (bucke_test.s3.amazonaws.com), then you should be able to set the Access-Control-Allow-Origin header to the appropriate value. Here are the instructions you need to follow for S3 specifically. For other servers/services, use a search for the header with the server name.
If you don't control the image server but control your own server or server-side web application, set up an HTTP endpoint that reverse proxies the image server. This way, the remote images will appear to be loaded from your origin and the image serrver's CORS policies won't affect you. I don't know what server you are using for your application, but all standard web servers and web application frameworks should be able to proxy requests. Just be careful and lock down the end point so that it doesn't get abused.

How to load dynamic image tui-image-editor?

2 Answers2