screen_capture.js

/**
 * A snippet I created to screen capture full webpages
 * relies on html2canvas: http://html2canvas.hertzen.com/
 * and also requires local proxy for images embedded from other sites: https://github.com/niklasvh/html2canvas/wiki/Proxies
 * 
 * In this gist I'm using the node.js version of the proxy: https://github.com/BugHerd/html2canvas-proxy-node
 * 
 * Issues:
 * 
 * For longer/larger pages I had an issue where the chrome tab would crash if I used PNG or JPEG, but WEBP seems
 * to work just fine.  So I'm defaulting to webp but feel free to change it
 * 
 * Some sites will have stronger CORS policies so the injection of the html2canvas.js from cdnjs will fail.
 * in cases like this I would copy all of html2canvas.js into another snippet and run that first.
 */
 
(function(d,w){
    var imagetype = "image/webp";
    var local_proxy = 'http://0.0.0.0:8000';
    
    function createLink(canvas){
        // create a div elemen
        var div = document.createElement('div');
        div.style.cssText = 'position: absolute; top: 0; width: 100%; z-index: 9999999; padding: 10px; text-align: center; background-color: #00BFFF';
        // create the anchor
        var a = d.createElement('a');
        a.style.cssText = 'text-align: center; text-decoration: underline; color:#fff;';
        a.setAttribute('target', '_blank');
        a.textContent = "Click here to view and download your screen capture";
        // convert the canvas into an image and set it as href of our new anchor link
        a.href = canvas.toDataURL(imagetype);
        // add it to the DOM just after the opening body tag
        div.appendChild(a);
        d.body.insertBefore(div, document.body.children[0]);
        return;
    }
    
    function doCapture(){
      var options = {
            allowTaint: false,
            logging: false,
            proxy: local_proxy,
            onrendered: function(canvas) {
              createLink(canvas);              
            }
      };
      w.html2canvas(d.body, options);
    }
    
    /****************************************************
     * check if html2canvas exists, load it, capture
    */
    if ( !w.html2canvas ) {
        var s = d.createElement('script');
        s.setAttribute('src', '//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js');
        s.addEventListener('load', function(){
            console.log('html2canvas loaded!');
            doCapture();
        });
        d.body.appendChild(s);
    } else {
        doCapture();
    }

})(document,window);