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

I used to do this in a project called friendsmap.biz (this project shows you a Google Map with 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 is dynamically created on the user end with javascript). To make this possible, I found the html2canvas project. Here is what I did.

1. Download the javascript of html2canvas, and include it 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 way. You will need the html2canvasproxy.php script especially if you are doing cross-site scripts.

Enjoy!