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,040
Reaction score
774
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
Learn If you want to write code for Python Machine learning, AI Statistics/data analysis Scientific research Web application servers Some microcontrollers JavaScript/Node JS/TypeScript Web sites Web application servers C# Games (Unity) Consumer applications (Windows) Business applications C++ Games (Unreal Engine) Operating systems, device drivers Microcontrollers/embedded systems Consumer applications (Linux) Some more tips: Do not learn C++ (or any other dialect of C) as a...

Similar threads

  • · Replies 3 ·
Replies
3
Views
1K
  • · Replies 15 ·
Replies
15
Views
3K
Replies
2
Views
5K
  • · Replies 3 ·
Replies
3
Views
4K
  • · Replies 3 ·
Replies
3
Views
2K