javascript - Retrieving image data URi from HTTP response -

the problem: imagine have td element structured such:

<td td="" colspan="2">   <br>    <img src="imageservlet" alt="random image" border="0" id="simplerandomimg">        </td> 

of course, other html around it. image contained within servlet doesn't have useful src indicated in html (clearly) - however, when open network tab in chrome, can preview loaded image , copy image data uri - gives me stable url like:

data:image/png;base64,ivborw0kggoaaaansuheugaaamgaaaaycaiaaacwmwo2aaahqkleqvr42u2db1sb5/nontrt2ppkjgmsnm180zhntkabupgkmeawxbaijyeywmhlseiggrhaaaiaieaseggqew+zzpledjyy07t/9t9129t129u9z7mp9lnfxxzcbules/71c77zirqcgj89z+993+d7vs/gh7gxsxh+wgawcf5itexmskpktk5osuljtu1n80d6etcetcetc... 

so, there exists stable reference loaded image. , browser 'knows' reference is, because can retrieve link data uri - there's no reference data uri in actual http response. seems lot less mystical understands javascript, not myself - explain what's going on here, , if there way gather data image uri http response?

attemped solutions: did little digging around in http response , located bit of javascript which, apparently, handles changing of images:

function changeimage() {  // makes new image load  var obj=document.getelementbyid('simplerandomimg');  if (obj != null) {   // append unique index force browser reload     obj.src='imageservlet?'+(cnt++);     } 

however, nothing see there gives indication actual uri location of image. before, if open google chrome network tab , attempt retrieve data image uri individual response, works , gives me valid uri - so, browser receiving it. how can access it?

e: clear, not control website in question, can't 'fix' changing internal javascript - i'm viewing site , interested in whether or not it's possible retrieve loaded images short of screenshotting page itself.

something should work. canvas api has 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 want special/scaled size         canvas.height = this.naturalheight; // or 'height' if want special/scaled size          canvas.getcontext('2d').drawimage(this, 0, 0);          // raw image data         callback(canvas.todataurl('image/jpg').replace(/^data:image\/(png|jpg);base64,/, ''));          // ... or data uri         callback(canvas.todataurl('image/jpg'));     };      image.src = url; }  // usage // beware of server cors settings.. getdatauri('image url here', function(datauri) {     console.log(datauri)     // whatever you'd data uri! });