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

日期:2020-10-10 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

近期写新项目有效到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+`" >

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

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