搜索
简帛阁>技术文章>利用JavaScript将页面截图生成图片传给后台的插件:html2canvas

利用JavaScript将页面截图生成图片传给后台的插件:html2canvas

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

三、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>

 

 

 

 
 
 
 
利用JavaScript页面截图生成图片传给后台插件html2canvas一、总结一句话总结:10<scripttypetext/javascript>11functiontake
使用方法项目中引入npminstallhtml2canvashtml代码//html代码<!把需要生成截图元素放在一个元素容器里,设置一个ref><divclassimage_to
jsPdf是一个可以把html转成pdf插件,有人多人在用。GitHub:https://githubcom/MrRio/jsPDF官方文档:http://rawgithackcom/MrRio/j
后端支持:图片要是cdn上地址,并且允许图片跨域,header头中设置应为AccessControlAllowOrigin:*2前端配置1varopts{2scale:scale,//添加sca
近在项目中遇到一个需求,需要提供网页截图功能。百度下发现html2canvas很好用。那就试试吧。资源下载地址插件下载地址:html2canvas下载地址使用方式项目使用react组件开发方式。
之前我们简单了解了canvas基本用法,这里我们来了解下如何html内容写入到canvas生成图片,这里我使用到了html2canvas插件,这个插件是基于canvas实现html2canv
1主要这个插件我爬了俩天坑第1:大家一定一定去官网copy最新html2canvasjs老版本有bug很gg,然后贴上我代码跟着这个代码写完美解决“图片模糊”于“图片位移”俩个问题这个方法就是
一、前言我发现DOM转化为图片是一个非常常见需求,而自己手动转是非常麻烦,于是找到了html2canvas这个插件,既是用得比较多也是维护得比较好一个插件。注意:版本比较多,这里介绍最新版
情景一:问题背景:生成图片在一个弹窗里面,如果页面没有滚动条就是正常,但是一旦出现滚动条并且页面发生滚动时html2canvas绘制成图片就会偏移出对应滚动高度白边,如下:解决办法:楼主查了
第一步,把网页保存为Canvas画布,借助于html2canvas库,http://html2canvashertzencom/html2canvas(documentgetElementById(