Retrieving image data URi from HTTP response

The Problem: Imagine I have a td element structured as such:

<td td="" colspan="2">
   <img src="ImageServlet" alt="random image" border="0" id="simpleRandomImg">      

of course, with other HTML around it. The image contained within the servlet doesn’t have a useful src indicated in the HTML (clearly) – however, when I open up the Network tab in Chrome, I can preview the loaded image itself and copy the image as a data URI – which gives me a stable URL like:


so, clearly there exists a stable reference to the loaded image. And clearly my browser ‘knows’ what that reference is, because I can retrieve the link to it as a data URI – but there’s no reference to that data URI in the actual HTTP response. This probably seems a lot less mystical to someone who understands JavaScript, but that someone is not myself – so could someone explain what’s going on here, and if there is some way to gather the data image URI from the HTTP response?

Attemped Solutions:
Did a little digging around in the HTTP response and located this bit of JavaScript which, apparently, handles the changing of images:

function changeImage() {
 // makes a new image load
 var obj=document.getElementById('simpleRandomImg');
 if (obj != null) {
  // append a unique index to force browser to reload

However, nothing I see there gives any indication as to the actual URI location of the image. As before, if I open the Google Chrome network tab and attempt to retrieve the data image URI from the individual response, it works and gives me a valid URI – so, clearly the browser is receiving it. How can I access it?

e: to be clear, I do not control the website in question, so I can’t ‘fix’ it by just changing the internal javascript – I’m viewing the site and am interested in whether or not it’s possible to retrieve the loaded images short of screenshotting the page itself.

You can set the src of the image to your URI by using setAttribute, like so:

obj.setAttribute(‘src’, uriString)

Something like this should work. Canvas API has a function called toDataURI

function getDataUri(url, callback) {
    var image = new Image();

    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
        canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

        canvas.getContext('2d').drawImage(this, 0, 0);

        // Get raw image data
        callback(canvas.toDataURL('image/jpg').replace(/^data:image//(png|jpg);base64,/, ''));

        // ... or get as Data URI

    image.src = url;

// Usage
// beware of server cors settings..
getDataUri('image url here', function(dataUri) {
    // Do whatever you'd like with the Data URI!