利用JavaScript將頁面截圖生成圖片傳給後臺的插件：html2canvas

時間 2019-11-11

標籤利用 javascript 頁面截圖生成圖片傳給後臺插件 html2canvas html canvas 欄目 JavaScript 简体版

原文原文鏈接

利用JavaScript將頁面截圖生成圖片傳給後臺的插件：html2canvas

1、總結

一句話總結：

10 <script type="text/javascript"> 11 function takeScreenshot() { 12  html2canvas(document.getElementById('view')).then(function(canvas) { 13  document.body.appendChild(canvas); 14  }); 15  } 16 </script>

一、html2canvas最簡單實例代碼？

注意canvas直接作參數傳入函數：12 html2canvas(document.getElementById('view')).then(function(canvas) {javascript

注意canvas直接被追加到body後面：13 document.body.appendChild(canvas);css

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <title>html2canvas example</title>
 8     <script src="html2canvas.min.js"></script>
 9 </head>
10 <script type="text/javascript">
11     function takeScreenshot() {
12         html2canvas(document.getElementById('view')).then(function(canvas) {
13             document.body.appendChild(canvas);
14         });
15     }
16 </script>
17 <body>
18 <div id="view" style="background:url(test.jpg) 50%; width: 300px; height: 100px;">
19     <input type="button" value="截圖" onclick="takeScreenshot()">
20 </div>
21 </body>
22 
23 </html>

2、利用JavaScript將頁面截圖生成圖片傳給後臺的插件：html2canvas

html2canvas是將html代碼轉換成爲圖片的插件，本主親測，以爲效果不錯，其官網爲：http://html2canvas.hertzen.com/html

第一步：將html轉化成canvasjava

第一步很簡單，只要傳入一個元素便可，如：ajax

html2canvas(document.body).then(function(canvas) {  
      document.body.appendChild(canvas);
 });

注：傳入的元素不能是JQ對象而是原生的JS對象。canvas

第二步：將canvas轉化爲圖片api

利用toDataURL方法進行轉換：var imageData = canvas.toDataURL("image/jpeg");瀏覽器

其中，imageData 獲得的是一串base64編碼。app

第三步：將base64轉換成圖片文件傳給後臺dom

編寫一個base64編碼轉換成blob對象的方法：

function getBlobBydataURI(dataURI,type){
            	var binary = atob(dataURI.split(',')[1]);
                var array = [];
                for(var i = 0; i < binary.length; i++) {
                    array.push(binary.charCodeAt(i));
                }
                return new Blob([new Uint8Array(array)], {type:type });

        }

發請求：

var formData = new FormData();
    		
            var $Blob= getBlobBydataURI(imageData,'image/jpeg');
            
            formData.append('file',$Blob);
            var timestamp = new Date().getTime();
            formData.append('key',timestamp + '.png');//獲得以當前時間命名的圖片文件
            for (var pair  of formData.entries()) {
            	
	           if(typeof value == 'object'){
	        	   if(value.hasOwnProperty("name")){
	        		   pair[1].name = "1.jpg"
	        	   }
	           }
	        }
    		$.ajax({
            	url:ip + ' ',//接口
            	type:'post',
            	data:formData,
            	async: true,
                crossDomain: true,
                contentType: false,
                processData: false,
    			success: function(data){
    				
    			}
        	});

這樣就大功告成了！

以上方法是將當前窗口可視的頁面全都給截下來了，若是你想截指定元素的圖，那麼就把html2canvas(document.body)裏面的元素換成指定的元素，可是，有的人會遇到圖截不完整咋辦？不要着急，這是由於官網上提供的dom抓取不支持高度,會形成只能夠截到瀏覽器可見的，解決的方法是把將要截圖的元素克隆一份，放到另外的元素中，設置position: absolute;z-index: 0;z-index要設置到最小便可

var height = $(".oldDiv").height()
         //克隆節點，默認爲false，不復制方法屬性，爲true是所有複製。
         var cloneDom = $(".newDiv").clone(true);
         //設置克隆節點的css屬性，由於以前的層級爲0，咱們只須要比被克隆的節點層級低便可。
         cloneDom.css({
             "background-color": "white",
             "position": "absolute",
             "top": "0px",
             "z-index": "-1",
             "height": height
         });
         //將克隆節點動態追加到body後面。

         $("body").append(cloneDom);

完整的代碼以下：

var height = $(".oldDiv").height()
         //克隆節點，默認爲false，不復制方法屬性，爲true是所有複製。
         var cloneDom = $(".newDiv").clone(true);
         //設置克隆節點的css屬性，由於以前的層級爲0，咱們只須要比被克隆的節點層級低便可。
         cloneDom.css({
             "background-color": "white",
             "position": "absolute",
             "top": "0px",
             "z-index": "-1",
             "height": height
         });
         //將克隆節點動態追加到body後面。

         $("body").append(cloneDom);

        html2canvas(cloneDom[0]).then(function(canvas){
    		function getBlobBydataURI(dataURI,type){
            	var binary = atob(dataURI.split(',')[1]);
                var array = [];
                for(var i = 0; i < binary.length; i++) {
                    array.push(binary.charCodeAt(i));
                }
                return new Blob([new Uint8Array(array)], {type:type });
            }
    		var imageData = canvas.toDataURL("image/jpeg");
    		
    		var formData = new FormData();
    		
            var $Blob= getBlobBydataURI(imageData,'image/jpeg');
            
            formData.append('file',$Blob);
            var timestamp = new Date().getTime();
            formData.append('key',timestamp + '.png');//獲得以當前時間命名的圖片文件
            for (var pair  of formData.entries()) {
            	
	           if(typeof value == 'object'){
	        	   if(value.hasOwnProperty("name")){
	        		   pair[1].name = "1.jpg"
	        	   }
	           }
	        }
    		$.ajax({
            	url:api.url,
            	type:'post',
            	data:formData,
            	async: true,
                crossDomain: true,
                contentType: false,
                processData: false,
    			success: function(data){
    				
    			}
        	});
         })

參考：利用JavaScript將頁面截圖生成圖片傳給後臺的插件：html2canvas - huangxinglian的博客 - CSDN博客
https://blog.csdn.net/huangxinglian/article/details/80582299

3、html2canvas最最最簡單實例

百度網盤下載地址：連接：https://pan.baidu.com/s/1ZZeKdgOu7iJb7Hx1xZEmxg
提取碼：jnsr

一、截圖

二、代碼

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <title>html2canvas example</title>
 8     <script src="html2canvas.min.js"></script>
 9 </head>
10 <script type="text/javascript">
11     function takeScreenshot() {
12         html2canvas(document.getElementById('view')).then(function(canvas) {
13             document.body.appendChild(canvas);
14         });
15     }
16 </script>
17 <body>
18 <div id="view" style="background:url(test.jpg) 50%; width: 300px; height: 100px;">
19     <input type="button" value="截圖" onclick="takeScreenshot()">
20 </div>
21 </body>
22 
23 </html>