javascriptによるページスクリーンショット(html 2 canvasの使い方)

今日はjavascriptを利用してページのスクリーンショットを実現する方法をまとめます.これは私が会社のプロジェクトで出会った問題です.

 html2canvas     JS         ，            ，  css    ，   canvas            

互換性:Firefox 3.5+Google Chrome Opera 12+IE 9+Safari 6+

**     :**

iframe

はサポートされていません

ドメイン間ピクチャ

はサポートされていません.

ブラウザプラグインでは

は使用できません.

Flash

はサポートされていません

古代ブラウザとIE

はサポートされていません
一、まずプラグインが必要です:1.html2canvas.min.jsダウンロードアドレス:http://download.csdn.net/detail/webxiaoma/9853415
2.cdn導入:http://www.bootcdn.cn/html2canvas/
二、プラグインができました.次は一歩一歩説明します.
まず、Webページをコピーする練習をします(html 2 canvas.min.jsを導入する必要があります)

<a type="button" id="down_button"><button id="creat">      button>a>
<div class="myImg" style="position:relative;">
    <img src="body_background.jpg">
div>

$("#creat").click(function(){
    html2canvas($("body"),{ // $(".myImg")       canvas   ，     
        onrendered:function(canvas){
              dataURL =canvas.toDataURL("image/png");
             $("body").append(canvas);
              console.log(dataURL);

              //    
              $('#down_button').attr( 'href' ,  dataURL ) ;
              $('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
          },
          width:320,
          height:400
      })
 })

以上のコードボタンbuttonをクリックすると、bodyの後ろに挿入された$(..myImg)が自動的にコピーされます.