htmlからキャンバスに画像を保存する

Question

私はfirefoxでは動作しますが、chromeでは動作しない以下のコードを持っています。

私が達成したいのは、#btnSave入力をクリックすると#widget divがキャンバスに作成され、ユーザーにコンピュータの画像として保存するように求められることです。

$(function() { 
$("#btnSave").click(function() { 
    html2canvas($("#widget"), { 
     onrendered: function(canvas) { 
      theCanvas = canvas; 
      document.body.appendChild(canvas); 

      //save image 
      canvas.toBlob(function(blob) { 
       saveAs(blob, "image.png"); 
      }); 

      // Clean up 
      document.body.removeChild(canvas); 
     } 
    }); 
}); 

}）;

Answer 1

使用このポリフィルを、それが箱から出して、それをサポートしていないブラウザで動作させるために：canvas.toBlob()上https://github.com/blueimp/JavaScript-Canvas-to-Blob

ドキュメント：

HTMLCanvasElement.toBlob（）メソッドは、ブロブを作成しますキャンバスに含まれる画像を表すオブジェクト 。このファイルは、ユーザ エージェントの裁量で、ディスクにキャッシュされているか、またはメモリに格納されている である可能性があります。 typeが指定されない場合、画像タイプはimage/pngです。 作成された画像の解像度は96dpiです。