Write to browser image from cfimage ( AJAX POC )

gistfile1.cfm

<cfscript>
	//create a 100 x 100 grey background
   img   = ImageNew("", 100, 100, "rgb", "lightgray");
   //create a duplicate of the image
   img2 = duplicate( img );
   //write in black
   imageSetDrawingColor( img2, 'black');
   //draw a black circle that is filled
   imageDrawOval( img2, 10, 10, 20, 20, true );
   //draw a black circle that is filled
   imageDrawOval( img2, 70, 10, 20, 20, true );
   //draw an arc
   imageDrawArc(img2,30,60,40,30,45,100,"no");
   //convert the image to base64, because you do not want to save it to disk
   imgBase64 = toBase64( img2 );

</cfscript>
<!--- Write the grey field to the browser ( will not work on cflive.net )  --->
<cfimage source="#img#" action="writeToBrowser">
<p>
<div id="log">initial content</div>

<script language="javascript" type="text/javascript"> 
	//set the js variable to the CF variable as though it came from AJAX
	var jsImage = '<cfoutput>#imgBase64#</cfoutput>'; 
	//write the js content to the div ( will work on cflive.net )
	document.getElementById('log').innerHTML = '<img src="data:image/png;base64, ' + jsImage + '" />';
</script> 




<p>
<div>
	<!--- Write the grey field with circle and arc to the browser ( will  work on cflive.net )  --->
    <img src="data:image/png;base64, <cfoutput>#imgBase64#</cfoutput>" />
</div>