html2canvas を使って表示ＨＴＭＬを画像変換してダウンロード

html2canvas - Screenshots with JavaScript を使います。
ＨＴＭＬが以下の様に、画像抽出されるエリアと抽出実行制御するボタンがあります。

<div id="tree">この中が画像として抽出される</div>
<div>
   <ul>
      <li><button id="preview" type="button">prev Image</button></li>
      <li><button id="outImage" type="button">Download</button>
          <a id="download" href="#"></a>
      </li>
   </ul>
</div>
<div id="previewImage"></div>

ダウンロードリンクは見えないようにしておきます。この a タグ href にダウンロード用に抽出結果が入ります。

a#download{
   display: none;
}

html2canvas version 0.4.1 を使用する場合、

$(function(){
   /* プレビュー click !!  */
   $("#preview").on('click', function(){
      html2canvas($("#tree"), {
         onrendered : function(canvas){
            $("#previewImage").empty()
            $("#previewImage").append(canvas);
         }
      });
   });
   /* Image コンバート → Download */
   $("#outImage").on('click', function(){
      html2canvas($("#tree"), {
         onrendered : function(canvas){
            var imgageData = canvas.toDataURL("image/png");
            // a id="download" に ダウンロード設定
            $("#download").attr("download", "テスト.png")
            .attr("href", imgageData.replace(/^data:image\/png/, "data:application/octet-stream"));
            // ダウンロード発火
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click", true, true
, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            document.getElementById("download").dispatchEvent(evt);
         }
      });
   });
});

html2canvas version 1.0.0 alpha 12 を使用する場合、

$(function(){
   /* プレビュー click !!  */
   $("#preview").on('click', function(){
      html2canvas(document.querySelector("#tree")).then(function(canvas){
         $("#previewImage").empty();
         $("#previewImage").append(canvas);
      });
   });
   /* Image コンバート → Download */
   $("#outImage").on('click', function(){
      html2canvas(document.querySelector("#tree")).then(canvas=>{
         var imgageData = canvas.toDataURL("image/png");
         // a id="download" に ダウンロード設定
         $("#download").attr("download", "テスト.png")
         .attr("href", imgageData.replace(/^data:image\/png/, "data:application/octet-stream"));
         // ダウンロード発火
         var evt = document.createEvent("MouseEvents");
         evt.initMouseEvent("click", true, true
, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
         document.getElementById("download").dispatchEvent(evt);
      });
   });
});

ダウンロード発火を、trigger("click") と書いてしまうと動きません。
IE11 では動きません。
version 0.4.1 を使う場合注意が必要で生成対象のコンテキスト（tag の中の表示）
背景色を指定していないと、背景色が透明の PNG画像になります。