最初のステップは、html2canvasライブラリ、http：//html2canvas.hertzen.com/の助けを借りて、キャンバスキャンバスとしてWebページを保存することです。
html2canvas（document.getElementById（ "id1"）、{onRendered：function（canvas）{document.getElementById（ "id2"）。appledchild（canvas）; html2canvasソースコードを変更して、canvasのID}）;注：html2canvas（）の最初のパラメーターは、キャンバスが生成される領域です。 Webページ全体がキャンバスを生成する場合、それはdocument.bodyです。 2番目のパラメーターの詳細については、公式WebサイトのCanvasのさまざまなプロパティを参照してください。もちろん、CanvasにIDを追加するなど、ソースコードを変更することで、必要なプロパティを追加できます。
2番目のステップは、最初のステップで生成されたキャンバスを写真に保存することです
var canvas = document.getElementById（ "<span style =" font-family：arial、helvetica、sans-serif; "> canvas" </span> <span style = "font-family：arial、helvetica、sans-serif;">）、</span> url = canvas.todataurl（ $（ "<a>"）.attr（ "href"、url）.attr（ "download"、 "img.png"）。appendto（ "body"）; triggerdownload [0] .click（）; triggerdownload.remove（）;
ここでは、todataurl（）メソッドに従ってください。キャンバスをデータ形式の画像URLに変換できます。このURLを<IMG/>タグに割り当てて、画像を表示します。コード内の他の部分は、必要なダウンロード機能です。