title: Codemirror & html2canvas: Save iFrame as Image
body: <p>Fiddle 1 (Using <a href="http://html2canvas.hertzen.com/" rel="nofollow noreferrer">html2canvas</a>): <a href="http://liveweave.com/HM9hSY" rel="nofollow noreferrer">http://liveweave.com/HM9hSY</a><br>
  Fiddle 2 (Using <a href="http://html2canvas.hertzen.com/" rel="nofollow noreferrer">html2canvas</a> without <a href="http://codemirror.net/" rel="nofollow noreferrer">Codemirror</a>): <a href="http://liveweave.com/rS8yxI" rel="nofollow noreferrer">http://liveweave.com/rS8yxI</a><br>
  Fiddle 3 (Using <a href="http://html2canvas.hertzen.com/" rel="nofollow noreferrer">html2canvas</a> with <a href="http://codemirror.net/" rel="nofollow noreferrer">Codemirror</a>): <a href="http://liveweave.com/TF3Ono" rel="nofollow noreferrer">http://liveweave.com/TF3Ono</a><br>
  Fiddle 4 (Using <a href="http://html2canvas.hertzen.com/" rel="nofollow noreferrer">html2canvas</a> with <a href="http://html2canvas.hertzen.com/documentation.html" rel="nofollow noreferrer">Codemirror</a>): <a href="http://liveweave.com/hqPoQg" rel="nofollow noreferrer">http://liveweave.com/hqPoQg</a>  </p>
  
  <p>Today I wanted to try and export an iframe as an Image. I did some research on this and came across a plugin called <a href="http://liveweave.com/HM9hSY" rel="nofollow noreferrer">html2canvas</a> which can save html as an image. (The documentation can be viewed <a href="http://codemirror.net/" rel="nofollow noreferrer">here</a>).  </p>
  
  <p><a href="https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf">Capture HTML Canvas as gif/jpg/png/pdf?</a><br>
  <a href="https://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots">Using HTML5/Canvas/JavaScript to take in-browser screenshots</a></p>
  
  <p>The <a href="http://liveweave.com/HM9hSY" rel="nofollow noreferrer">first fiddle</a> is just an experiment so save html as an image. (This fiddle is not using <a href="http://codemirror.net/" rel="nofollow noreferrer">Codemirror</a>)<br>
  The <a href="http://liveweave.com/rS8yxI" rel="nofollow noreferrer">second fiddle</a> saves the image but doesn't grab the iframe preview given from source. (This fiddle is not using Codemirror)<br>
  The <a href="http://liveweave.com/TF3Ono" rel="nofollow noreferrer">third fiddle</a> does not save an image. (This fiddle is not using <a href="http://liveweave.com/rS8yxI" rel="nofollow noreferrer">Codemirror</a>)  </p>
  
  <p>My problem is with the <a href="http://html2canvas.hertzen.com/" rel="nofollow noreferrer">2nd</a> and <a href="http://liveweave.com/hqPoQg" rel="nofollow noreferrer">3rd</a> fiddles where [html2canvas][17] does not save the iframe's preview.</p>
  
  <p>I've been playing with this throughout yesterday and today and I haven't been successful.</p>
  
  <p>Today I decided to try and use Codemirror's code editor to render what I want instead.  </p>
  
  <p>Basically I take a screenshot of the body and embed an image into it.</p>
  
  <p>(This is <a href="http://liveweave.com/hqPoQg" rel="nofollow noreferrer">Fiddle 4</a> I'm referring to).</p>
  
  <p>I then open the image in a new window using <code>window.open</code> after that I reset the code editor back to where it was.</p>
  
  <p>Is it possible to save an iframe's preview/source as an image? Am I doing anything wrong to achieve this effect? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#saveimg").click(function() {
      html2canvas($("#preview"), {
        onrendered: function(canvas) {
          var myImage = canvas.toDataURL("image/png");
          $("#imgprev").html("&lt;img src='"+ myImage +"' /&gt;");
        }
      });
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://raw.github.com/niklasvh/html2canvas/gh-pages/build/html2canvas.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css' /&gt;
  
  &lt;div align="center"&gt;
    &lt;p&gt;
      &lt;button id="saveimg"&gt;
        Save as Image
      &lt;/button&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  &lt;iframe id="preview" src="http://duckduckgo.com/"&gt;&lt;/iframe&gt;
  &lt;div id="imgprev"&gt;&lt;/div&gt;
  &lt;canvas id="mycanvas"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>