1

I am trying to load an image from file using Javascript LoadImage library (https://github.com/blueimp/JavaScript-Load-Image).

The load method returns me an image object with its src set to some blob object:

<img src="blob:http%3A//localhost%3A3577/902d4e78-2e3e-467c-99ce-6683db24996e" width="960" height="540">

If I append this element to DOM, it's displayed nicely. However, for my need, I just need the image data, not the DOM object. I need to take that data and set another, existing element's src to that. So, just like any sane person would do, I get the returned object's src (blob:http%3A//localhost%3A3577/902d4e78-2e3e-467c-99ce-6683db24996e), get a reference to my existing image DOM object (named img below), and using jQuery, set its src:

img.attr('src', src);

This results in my existing image object becoming:

<img src="blob:http%3A//localhost%3A3577/902d4e78-2e3e-467c-99ce-6683db24996e">.

Yes, exactly the same (expect explicit width and height attributes, which I also tried to add, which changed absolutely nothing). But instead of the image, my existing tag now displays a broken image:

enter image description here

Why and how when image tags with the same src, one can display the image and the other cannot?

Can Poyrazoğlu
  • 33,241
  • 48
  • 191
  • 389
  • http://stackoverflow.com/questions/14952052/convert-blob-url-to-normal-url – Malk Mar 30 '16 at 00:20
  • 1
    @Malk it says blobs can't be shared between computers/networks/browsers etc, which is stating the obvious. however, my case is about two DOM elements within the same window. – Can Poyrazoğlu Mar 30 '16 at 00:33
  • Is the second DOM element in the exact same DOM as the first one? That is, are you trying to carry the blobs across page loads or something? –  Mar 30 '16 at 00:40
  • @duskwuff as I've clearly stated in the question, I'm in the same DOM they are even executed consequently in the same script block. there is no page load etc. – Can Poyrazoğlu Mar 30 '16 at 00:45

1 Answers1

5

This is most likely due to the LoadImage library calling URL.revokeObjectURL() in order to release the allocated image.

Try to specify the noRevoke option.

tur
  • 328
  • 1
  • 8