html2canvas.jsとdom-to-image.jsはスクリーンショット機能を実現する

html2canvas.jsとdom-to-image.jsはスクリーンショット機能を実現する

      ，  html           ，       html2canvas.js。
       ，     （           ，            ），         dom-to-image.js,          。

      ，  。

    ：     js   (     )

   ②dom-to-image.js：https://github.com/tsayen/dom-to-image

html2canvas.js
html2canvas.jsは比較的優秀なプラグインで、htmlコードを簡単に長いcanvasに変換して、さらに保存して共有できる画像を生成することができて、現在市販されている多くのプラグインですが、彼は欠陥があっても、ピットを使っています.欠陥が多く、プロジェクトのニーズにも適用されません.ここではあまり詳しく説明しません.次はhtml 2 canvasです.js横たわった欠陥記録欠陥は参考になる:https://segmentfault.com/a/1190000015992221
dom-to-image.js

window.onload=function(){
     
    var node = document.getElementById('download');

    domtoimage.toPng(node)
    .then(function (dataUrl) {
     
        console.log(dataUrl)
        var link = document.createElement('a');
        link.download = "   .jpeg";
        link.href = dataUrl;
        link.click();

    });
}

ここでデフォルトで印刷される背景は透明です.不透明にするには、ターゲットdownloadに指定したcssスタイルを追加します.

   
"download" style="background: #fff;">
 
  
       ~