利用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);

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>html2canvas example</title>

     <script src="html2canvas.min.js"></script>

 </head>

 <script type="text/javascript">

     function takeScreenshot() {

         html2canvas(document.getElementById('view')).then(function(canvas) {

             document.body.appendChild(canvas);

         });

     }

 </script>

 <body>

 <div id="view" style="background:url(test.jpg) 50%; width: 300px; height: 100px;">

     <input type="button" value="截图" onclick="takeScreenshot()">

 </div>

 </body>

 </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

三、html2canvas最最最简单实例

百度网盘下载地址：链接：https://pan.baidu.com/s/1ZZeKdgOu7iJb7Hx1xZEmxg
提取码：jnsr

1、截图

2、代码

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>html2canvas example</title>

     <script src="html2canvas.min.js"></script>

 </head>

 <script type="text/javascript">

     function takeScreenshot() {

         html2canvas(document.getElementById('view')).then(function(canvas) {

             document.body.appendChild(canvas);

         });

     }

 </script>

 <body>

 <div id="view" style="background:url(test.jpg) 50%; width: 300px; height: 100px;">

     <input type="button" value="截图" onclick="takeScreenshot()">

 </div>

 </body>

 </html>