Question

This is just a conjecture, I’m not sure whether there is an approach.

The core part of this question is how to get the data of the image without
making another XHR request for it’s src.

I have tried canvas before, I created a canvas object and want to drawImage with
the DOM reference of the target image, or an Image object with src attribute.
But I always got the same error as this question mentions.

Go back to question, since the image we see has been fetched by the browser and
must be somewhere in the disk or memory, there should be a method to operate
the image file. If really not, please tell me why javascript or browsers
prevent doing this.

Answer 1

If you’re getting the security exception then you cannot upload that image. Period.

Well, you might be able to enable cors for that image and fix the error.

Otherwise there are very good reasons why you aren’t allowed to do that.