JavaScript Use JS to get at blob-ified image listed in Chrome DevTools

  • Thread starter Thread starter Swamp Thing
  • Start date Start date
  • Tags Tags
    Image Javascript
Click For Summary
JavaScript cannot directly access the binary data of a "blob" type image resource that has been loaded onto a web page unless it was originally sourced from a data URI or Base64 format. If the image is visible in the browser but the URL is no longer functional due to server expiration, users cannot retrieve the image data through JavaScript. For those needing the image, a suggested workaround is to take a screenshot. Additionally, Firefox developer tools provide an option to download the image directly from the Response tab in the Network section, allowing users to save the image without relying on the original URL.
Swamp Thing
Insights Author
Messages
1,035
Reaction score
771
Can JavaScript access a "blob" type image resource that has been loaded as part of a web page, and is then visible in the Networks tab as well as under Application > Frames > Image ... ?

In the scenario I am looking at, the page is open, and the image is visible in the browser to the user. It is also available for previewing in DevTools... but the URL won't work, maybe because the server expires it soon after page load.

So I would like to get the image data in say Base64 format or in Data URI format without needing to request the URL from the server. This I would like to do by pasting code into the console.
 
Technology news on Phys.org
Swamp Thing said:
Can JavaScript access a "blob" type image resource that has been loaded as part of a web page, and is then visible in the Networks tab as well as under Application > Frames > Image ... ?

No, there is no access to the binary data forming an img from JavaScript (unless that image was originally loaded from a dataUri or Base64 src of course).

If you are intent on violating the copyright owners rights then take a screen grab. Alternatively, FireFox developer tools allows you to download the image from the Response tab in Network rather than just preview it.
 
  • Like
Likes Swamp Thing