tui.image-editor: Can't consistently see images loaded via `loadImageFromURL`

Version

3.2.0

Development Environment

MacOS 10.12.6 Chrome Version 69.0.3497.100 (Official Build) (64-bit)

Current Behavior Using loadImageFromURL doesn’t consistently display image. Occasionally there is a CORS error, despite the resource being fully configured for CORS. And sometimes it will load fine. It’s fairly random. I am using the same test images for all tests. I can, with 100% certainty load the same images to <img> tags as well as to a raw fabric.js instance.

Are there any updated (perhaps undocumented) steps to take after loading an image via loadImageFromURL? Is a canvas refresh/resize required? Must I perform some step in the Promise after the fact? I’m hoping I’m simply missing something, but this is a fairly frustrating occurrence.

UPDATE: So, apparently, (in Chrome) when the dev tools are open it works. When the dev tools are closed, it fails. Video of issue in action.

When the tools are closed I receive Access-Control-Allow-Origin error. This, despite the fact that the resources are publicly accessible and currently configured to allow all '*'. You can see in the video the same resources being “previewed” in the grid via <img> tags. However, when attempting to open a modal and simply call loadImageFromURL it fails. I’ve tried nextTick and a host of other “hacks”, but nothing seems to matter other than dev tools being opened or closed.

FYI, I’m console.loging nearly everything. Occasionally I receive an executing command state is locked error from the editor instance as well. No idea what that means.

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 1
Comments: 46 (6 by maintainers)

Most upvoted comments

After debugging with Burp Suite, I think I identified the problem and found a solution. No patch should be needed.

What’s the quick solution ? Add the attribute crossorigin="anonymous" in the <img> tag that displays the image before opening it in the editor. ie: <img src="targetUri" crossorigin="anonymous" />

Explain the issue and solution The main issue is related to caching and how the browser sends the Origin header.

First you have to know that by default the browser does not send the Origin header when you load an image with the <img> tag that does not have the crossorigin="anonymous" attribute. More info

What’s happening is that the browser tries to load the image from the <img> tag before the image editor is opened, and the puts it into its cache.

So when you open the editor, it tries to load the image a second time, and you actually get a cached response of the first request that was made without the Origin header. Without this header, that cached response does not contain all the allow-control-* headers necessary to pass the CORS check, that’s why you get the error.

You can check this, by opening Chrome’s inspector with “disable cache” checked. It should work. The previous posts that suggested to include a parameter ?t=<random_number> had the effect to bypass the browser cache, but this solution is not possible when using pre-signed urls.

So adding crossorigin="anonymous" in the img tag should solve the problem.

KrYpTeD974 on Nov 26, 2021

after digging into this and playing a bit with the source code. I found that this line here is causing the CROS issue. Providing a way to override it would solve the issue. I am working on an external patch fix if it all went well I will post it here. This is a temp fix thought I think definitely a way to override the image option is the optimal solution

UPDATE patch file

diff --git a/node_modules/tui-image-editor/.DS_Store b/node_modules/tui-image-editor/.DS_Store
new file mode 100644
index 0000000..3e391de
Binary files /dev/null and b/node_modules/tui-image-editor/.DS_Store differ
diff --git a/node_modules/tui-image-editor/dist/tui-image-editor.js b/node_modules/tui-image-editor/dist/tui-image-editor.js
index 5b1f7e5..e7587ba 100644
--- a/node_modules/tui-image-editor/dist/tui-image-editor.js
+++ b/node_modules/tui-image-editor/dist/tui-image-editor.js
@@ -7231,7 +7231,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 var imageOption = {
   padding: 0,
-  crossOrigin: 'Anonymous'
+  // crossOrigin: 'Anonymous'
 };
 
 /**

Ilaiwi on Sep 28, 2021

I was having the same issue with Amazon S3 urls, which after setting up the bucket CORS, it was still not working.

Looks like a cache issue, so I just fixed it by adding a random parameter at the end of the url:

s3_url+‘&t=’+Math.random()

It seems to work well now.

pythobot on Jun 4, 2021

@jinwoo-kim-nhn any fixes for the problem ?

Aarbel on Oct 23, 2020