title: Generate an image of a div and Save as
body: <p>I'd like to create an input button "Save image" that :</p>
  
  <ol>
  <li>take a screen shot of a div</li>
  <li>ask to "Save as" on the user's computer</li>
  </ol>
  
  <p>I've found how to create a screen of a dive using html2canvas and to open it in a new tab, it works perfectly :</p>
  
  <pre><code>function printDiv2(div)
  {
      html2canvas((div), {
          onrendered: function(canvas) {
              var img = canvas.toDataURL();
              window.open(img);
        }
      });
  }
  </code></pre>
  
  <p>But for thee Save as part, is a kind of the tough part... I've found interesting topics, as I'm new in JS (and object) coding, I'm a little bit confused... I think I'll have to use the FileSaver.js and to create a new blob
  <a href="http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/">http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/</a></p>
  
  <p>But I don't get how to implement the saveAs in my html2canvas, how to cast properly a new blob...</p>
  
  <pre><code>function printDiv2(div)
  {
      html2canvas((div), {
          onrendered: function(canvas) {
              var img = canvas.toDataURL();
              window.open(img);
  
              var blob = new Blob(img, {type: "image/jpeg"});
              var filesaver = saveAs(blob, "my image.png");
        }
      });
  }
  </code></pre>
  
  <p>Also I tried to do something with this, by extracting the base64 generated URL, but it's too complicated for me to understand everyting :
  <a href="http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752">http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752</a></p>
  
  <p>But someone give me a few tips and help me please ?</p>