应用html2canvas.js完成网页页面截图并显示信息或提

日期：2020-12-11 类型：科技新闻 

关键词：免费自助建站，手机建站平台，wap建站，免费自助建站平台，H5网站,H5模板建站

近期写新项目有效到html2canvas.js，能够完成网页页面的截图作用，但遭受了很多的坑，特此写1篇随笔纪录1下。

在应用html2canvas时将会会遇到诸如只能截取可视性化页面、截图沒有情况色、svg标识没法截取等难题，下面详尽的表明1下。

1、导入html2canvas.js

这个不必须多说，能够从github上获得： https://github.com/niklasvh/html2canvas

还可以立即导入连接： <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

应用起来也十分简易，实际的API能够去在网上搜索，转化成png照片应用“image/png”便可。

在其中$("#xxx")为你要想截取的div，外面能够根据jquery获得它，自然document获得也是能够的。

html2canvas($("#xxx"), {
         onrendered: function (canvas) {
             var url = canvas.toDataURL("image/png");
　　　　　　　 window.location.href = url;
           }
   });

其它种类的照片如jpg，为image/jpeg这些，可自主查寻API。

到这里实际上简易的截图早已进行了，假如页面略微繁杂1点的话，将会就会出現各种各样坑，下面1个1个处理。

2、svg没法截取的难题

当大家截取1个div时，假如这个div中存在svg标识，1般状况下是截取不到的，例如截取1个步骤图，获得的是下面这个模样：

能够看到，步骤图的线沒有截取到，也便是svg沒有截取到，这时候的处理方式是把svg变换成canvas再开展截图便可，立即上编码。

这里的each循环系统是循环系统全部的svg标识，将它们所有变换为canvas

if (typeof html2canvas !== 'undefined') {
        //下列是对svg的解决
        var nodesToRecover = [];
        var nodesToRemove = [];
        var svgElem = cloneDom.find('svg');
        svgElem.each(function (index, node) {
            var parentNode = node.parentNode;
            var svg = node.outerHTML.trim();

            var canvas = document.createElement('canvas');
            canvas.width = 650;
            canvas.height = 798;
            canvg(canvas, svg); 
            if (node.style.position) {
                canvas.style.position += node.style.position;
                canvas.style.left += node.style.left;
                canvas.style.top += node.style.top;
            }

            nodesToRecover.push({
                parent: parentNode,
                child: node
            });
            parentNode.removeChild(node);

            nodesToRemove.push({
                parent: parentNode,
                child: canvas
            });

            parentNode.appendChild(canvas);
        });
        
   }

这里必须用到canvg.js，和它的依靠文档rgbcolor.js，在网上能够立即免费下载，还可以立即导入。

3、情况全透明的难题

这个实际上很简易，由于它默认设置是全透明的，html2canvas中有1个主要参数background便可以加上情况色，以下：

html2canvas(cloneDom, {
      onrendered: function(canvas) {
           var url =canvas.toDataURL("image/png");
      },
      background:"#fafafa"
});

4、只能截取可视性一部分的难题

假如必须截取的div超过了页面，将会会遇到截取不全的难题，如上图，仅有1半的內容，这是由于看不见的一部分被掩藏了，而html2canvas是没法截取掩藏的dom的。

因此此时的处理方法是应用克隆，将必须截取的一部分克隆1份放在网页页面最底层，再应用html2canvas截取这个详细的div，截取进行后再remove这一部分內容便可，详细编码以下：

function showQRCode() {
    scrollTo(0, 0);
    
    //克隆连接点，默认设置为false，即不拷贝方式特性，为true是所有拷贝。
    var cloneDom = $("#d1").clone(true);
    //设定克隆连接点的z-index特性，要是比被克隆的连接点等级低便可。
    cloneDom.css({
        "background-color": "#fafafa",
        "position": "absolute",
        "top": "0px",
        "z-index": "⑴",
        "height": 798,
        "width": 650
    });
   
    if (typeof html2canvas !== 'undefined') {
        //下列是对svg的解决
        var nodesToRecover = [];
        var nodesToRemove = [];
        var svgElem = cloneDom.find('svg');//divReport为必须截取成照片的dom的id
        svgElem.each(function (index, node) {
            var parentNode = node.parentNode;
            var svg = node.outerHTML.trim();

            var canvas = document.createElement('canvas');
            canvas.width = 650;
            canvas.height = 798;
            canvg(canvas, svg); 
            if (node.style.position) {
                canvas.style.position += node.style.position;
                canvas.style.left += node.style.left;
                canvas.style.top += node.style.top;
            }

            nodesToRecover.push({
                parent: parentNode,
                child: node
            });
            parentNode.removeChild(node);

            nodesToRemove.push({
                parent: parentNode,
                child: canvas
            });

            parentNode.appendChild(canvas);
        });
        
        //将克隆连接点动态性追加到body后边。
        $("body").append(cloneDom);

        html2canvas(cloneDom, {
            onrendered: function(canvas) {
                var url =canvas.toDataURL("image/png");
                window.location.href = url ;
                cloneDom.remove();    //清空克隆的內容
             },
             background:"#fafafa"
        }); 
        
   } 
}

这里外面最先即将截取的div克隆1份，并将z-index设定为最少，防止引发页面的不美观大方，随后是对svg开展的解决，上面早已剖析过了，最终将克隆连接点追加到body后边便可。

在onrendered中，大家能够立即应用location.href自动跳转查询照片，能够开展储存实际操作，还可以将url写入img的src中显示信息在页面上，如 $('#imgId').attr('src',url);

最终能够在页面展现不久截取到的照片：

5、提交照片储存到数据信息库，并在页面中获得该照片显示信息

如今获得url了，必须提交到后端开发，并存到数据信息库中，再另外一个展现的页面中载入该照片。我1般习惯性于应用url来储存照片相对路径，而并不是用blob储存。

由于必须在另外一个页面中获得照片，因此我把照片存在了与webapp同级的1个resource文件目录下，编码以下：

//储存照片并回到照片相对路径
        BASE64Decoder decoder = new BASE64Decoder();
        byte[] b = decoder.decodeBuffer(product.getProPic().substring("data:image/png;base64,".length()));
        ByteArrayInputStream bais = new ByteArrayInputStream(b);
        BufferedImage bi1 = ImageIO.read(bais);
        String url = "user_resource" + File.separator + "img" + File.separator + "product_"+UUID.randomUUID().toString().replace("-", "")+".png";
        String totalUrl = System.getProperty("root") + url;
        File w2 = new File(totalUrl);
        ImageIO.write(bi1, "png", w2);
        
        product.setProPic(url);    //将照片的相对性相对路径储存到数据信息库中
        
        int res = productMapper.insertSelective(product);    //加上到数据信息库

这里由于涉及到到其它逻辑性，因此只放1一部分编码。

这里应用的是BASE64Decoder来储存照片，大家获得到照片后，必须应用substring将“data:image/png;base64,”的內容截取掉，由于“，”后边才是照片的url， url.substring("data:image/png;base64,".length()) 。

针对相对路径，上面编码中的url是我储存到数据信息库中的內容，而totalUrl便是具体开展ImageIO的write实际操作时储存的真正相对路径，getProperty()方式获得的新项目的根文件目录，能够在web.xml中配备以下內容，随后 System.getProperty("root") 便可。

<!-- 配备系统软件得到新项目根文件目录 -->
<context-param>
    <param-name>webAppRootKey</param-name>
    <param-value>root</param-value>
</context-param>
<listener>
    <listener-class>
        org.springframework.web.util.WebAppRootListener
    </listener-class>
</listener>

如今照片的url就存到数据信息库里了，而照片自身就储存在tomcat下该新项目的这个文件目录下。

最终外面在页面上获得，只必须在当今的url前面再加新项目名便可 < img class ="depot-img" src ="<%=request.getContextPath()%>/`+e.proPic+`" > 。

随后便可以看到页面上显示信息的照片了：

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：HTML5新增form控制和表单特性案例编码详解 返回下一篇：canvas简单制图的完成（海棉宝宝篇）