利用JavaScript將頁面截圖生成圖片傳給后台的插件：html2canvas
一、總結
一句話總結：
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>
1、html2canvas最簡單實例代碼？
注意canvas直接做參數傳入函數：12 html2canvas(document.getElementById('view')).then(function(canvas) {
注意canvas直接被追加到body后面：13 document.body.appendChild(canvas);
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>
二、利用JavaScript將頁面截圖生成圖片傳給后台的插件：html2canvas
html2canvas是將html代碼轉換成為圖片的插件，本主親測，覺得效果不錯，其官網為：http://html2canvas.hertzen.com/
第一步：將html轉化成canvas
第一步很簡單，只要傳入一個元素即可，如：
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});注：傳入的元素不能是JQ對象而是原生的JS對象。
第二步：將canvas轉化為圖片
利用toDataURL方法進行轉換：var imageData = canvas.toDataURL("image/jpeg");
其中，imageData 得到的是一串base64編碼。
第三步：將base64轉換成圖片文件傳給后台
編寫一個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
https://blog.csdn.net/huangxinglian/article/details/80582299
三、html2canvas最最最簡單實例
百度網盤下載地址：鏈接：https://pan.baidu.com/s/1ZZeKdgOu7iJb7Hx1xZEmxg
提取碼：jnsr
1、截圖
2、代碼
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>