How to Take a Snapshot (Screen Capture) of an HTML5 Container with JavaScript

I used to do this in a project that is called friendsmap.biz (this project shows you in a Google Map your Facebook friends). By now, the page is broken (Facebook updated its API, and I haven't had time to update the project). Yesterday I had a long discussion with my boss about the need to take a snapshot of a dynamic element (let's call it a graph or a map, anything that it is dynamically created on user end with javascript).

In order to make this possible, I found html2canvas project. Here it is what I did.

1. Download the javascript of html2canvas, and included in your HTML
   <script src="/html2canvas.min.js" type="text/javascript"></script>
2. Put a DIV tag and use the id property to name it.
   <div id='map-canvas'><!-- your magic here --></div>
3. Include this routine
   <script>
function saveMapToDataUrl() {
       var element = document.getElementById('map-canvas');

       if (
               ((get_browser() == "Safari") && (get_browser_version() > 535)) ||
               ((get_browser() != "Safari") && (get_browser() != "Opera"))
               ){
               html2canvas(element, {
                       useCORS: true,
                       onrendered: function(canvas) {
                               var dataUrl= canvas.toDataURL("image/png");
                               var output = dataUrl.replace(/^data:image\/(png|jpg);base64,/, "");

                                      // do your manipulation here, for example post it to a PHP
                                       var xmlhttp2;
                                       if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                                               xmlhttp2=new XMLHttpRequest();
                                       }
                                       else{ // code for IE6, IE5
                                               xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
                                       }

                                       xmlhttp2.onreadystatechange=function(){
                                               // some after post magic here
                                       }
                                       // We push the update into db with a form object
                                       var formPost = new FormData();
                                       formPost.append("uid", 0000);
                                       formPost.append("image", output);
                                       formPost.append("locale", "en_CA");
                                       xmlhttp2.open("POST","post-map.php",true);
                                       xmlhttp2.send(formPost);
                       }
               });
       }
         html2canvas(element, {
                       proxy: "html2canvasproxy.php",
                       onrendered: function(canvas) {
                               var dataUrl= canvas.toDataURL("image/png");
                               var output = dataUrl.replace(/^data:image\/(png|jpg);base64,/, "");

                                       // do your data manipulation here, for example send to a post PHP
                                       var xmlhttp2;
                                       if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                                               xmlhttp2=new XMLHttpRequest();
                                       }
                                       else{ // code for IE6, IE5
                                               xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
                                       }

                                       xmlhttp2.onreadystatechange=function(){
                                                // some after post magic here
                                       }

                                       // We push the update into db with a form object
                                       var formPost = new FormData();
                                       formPost.append("uid", 0000);
                                       formPost.append("image", output);
                                       xmlhttp2.open("POST","post-map.php",true);
                                       xmlhttp2.send(formPost);
                       }
               });
}
</script>
4. Do your additional javascript coding to call the routine. Remember javascript is asynchronous in many ways, so you will need to deal with that in your own way. You will need the html2canvasproxy.php script especially if you are doing cross-site scripts.

Enjoy!