topical media & game development

talk show tell print

mobile-query-three-tmp-screenshooter-index.htm / htm



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../www/vendor/bootstrap/docs/assets/js/jquery.js"></script>
  <body><script>
          var urls        = [
                  //'http://localhost:8000/examples/minimal/',
  		'../../plugins/csg/examples/index.html'
  	];
  
  	var url                = urls[0];
  
          // create the iframe element
          var iframeEl        = document.createElement('iframe');
          iframeEl.setAttribute('src', url);
          iframeEl.setAttribute('width', '640px');
          iframeEl.setAttribute('height', '480px');
          document.body.appendChild(iframeEl)
          
          
take a screenshot of a iframe element
parameter: {element} the iframe element to screenshot
returns: {string} the data url of the screenshot

  
          var shootIframe        = function(iframeEl){
                  console.assert(iframeEl.contentWindow.document.querySelectorAll('canvas').length > 0);
                  // get the canvas element in the iframe
                  var document        = iframeEl.contentWindow.document;
                  var canvasEl        = document.querySelectorAll('canvas')[0];
                  // check it is possible to screenshot
                  var gl                = canvasEl.getContext("experimental-webgl");
                  var shootAble        = gl.getContextAttributes().preserveDrawingBuffer ? true : false;
                  console.assert( shootAble, "iframe canvas gl context doesnt have preserverDrawingBuffer");
                  // get the dataURL                
                  var dataUrl        = canvasEl.toDataURL();
                  // return the dataUrl
                  return dataUrl;
          };
  
          iframeEl.addEventListener('load', function(){
                  setTimeout(function(){
                          var url        = shootIframe(iframeEl);
                          console.log("url", url.length)
                          window.open(url);
                  }, 1.2*1000);
          });
  
  </script></body>


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.