1. 程式人生 > >使用html2canvas實現瀏覽器截圖

使用html2canvas實現瀏覽器截圖

實現功能:點選按鈕,實現擷取當前頁的功能。使用html2canvas外掛機可以實現該功能。

1、在html中引入html2canvas外掛

   <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script> 
2、部分html如下:
   <button>擷取當前頁</button>
3、js如下:(先引入jquery)
 $('button').click(function(event){
        event.preventDefault();
        // 生成img的url
        html2canvas($('body'), {  
            allowTaint: true,  
            taintTest: false, 
            background:'#990000' ,
            onrendered: function(canvas) {   
               //生成base64圖片資料  
               dataUrl = canvas.toDataURL("image/jpg"); 
               var image = document.createElement("img"); 
               //將img節點新增到body裡面
               image.src = dataUrl;
                 $('body').append(image); 
            }
 }); 
對html2canvas()函式裡面的引數的解釋:

第一個引數是要截圖的DOM物件,第二個引數是渲染完成後回撥的canvas物件


name                     type                 default             description

allowTaint              boolean            false                 是否支援跨域圖片

background           string                #fff                    畫布的背景色,沒有設定則採用DOM節點的背景色,設定為undefined為透明

height                   number              null                   畫布的高度,沒有設定則預設是window的高度

width                    number              null                    同上

letterRendering    boolean             false                  設定字元間距

logging                 boolean             false                  在console是否設定log()

proxy                    string                 undefined          url用於下載跨域圖片,,如果沒有設定,則不能下載跨域圖片

taintTest               boolean             true       

timeout                number              0                       下載圖片超時的時間,單位為ms

useCORS           boolean              false                  是否使用跨域圖片