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.