使用html2canvas.js实现页面截图并显示或上传的示例代码


Posted in HTML / CSS onDecember 18, 2018

最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下。

在使用html2canvas时可能会遇到诸如只能截取可视化界面、截图没有背景色、svg标签无法截取等问题,下面详细的说明一下。

一、导入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。

到这里其实简单的截图已经完成了,如果界面稍微复杂一点的话,可能就会出现各种坑,下面一个一个解决。

二、svg无法截取的问题

当我们截取一个div时,如果这个div中存在svg标签,一般情况下是截取不到的,比如截取一个流程图,得到的是下面这个样子:

使用html2canvas.js实现页面截图并显示或上传的示例代码

可以看到,流程图的线没有截取到,也就是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,网上可以直接下载,也可以直接导入。

三、背景透明的问题

这个其实很简单,因为它默认是透明的,html2canvas中有一个参数background就可以添加背景色,如下:

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

四、只能截取可视部分的问题

如果需要截取的div超出了界面,可能会遇到截取不全的问题,如上图,只有一半的内容,这是因为看不到的部分被隐藏了,而html2canvas是无法截取隐藏的dom的。

所以此时的解决办法是使用克隆,将需要截取的部分克隆一份放在页面底层,再使用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": "-1",
        "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克隆一份,并将z-index设置为最小,避免引起界面的不美观,然后是对svg进行的处理,上面已经分析过了,最后将克隆节点追加到body后面即可。

在onrendered中,我们可以直接使用location.href跳转查看图片,可以进行保存操作,也可以将url写入img的src中显示在界面上,如 $('#imgId').attr('src',url);

最后可以在界面展示刚刚截取到的图片:

使用html2canvas.js实现页面截图并显示或上传的示例代码

五、上传图片保存到数据库,并在界面中获取该图片显示

现在得到url了,需要上传到后端,并存到数据库中,再另一个展示的界面中加载该图片。我一般习惯于使用url来存储图片路径,而不是用blob存储。

因为需要在另一个界面中获取图片,所以我把图片存在了与webapp同级的一个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);    //添加到数据库

这里因为涉及到其它逻辑,所以只放一部分代码。

这里使用的是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下该项目的这个目录下。

使用html2canvas.js实现页面截图并显示或上传的示例代码

最后外面在界面上获取,只需要在当前的url前面加上项目名即可 < img class ="depot-img" src ="<%=request.getContextPath()%>/`+e.proPic+`" >

然后就可以看到界面上显示的图片了:

使用html2canvas.js实现页面截图并显示或上传的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
Canvas globalCompositeOperation
Dec 18 #HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 #HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 #HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 #HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 #HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 #HTML / CSS
canvas探照灯效果的示例代码
Nov 30 #HTML / CSS
You might like
PHP多个版本的分析解释
2011/07/21 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
python和pyqt实现360的CLable控件
2014/02/21 Python
Python写的一个简单监控系统
2015/06/19 Python
python中lambda()的用法
2017/11/16 Python
python生成圆形图片的方法
2020/03/25 Python
python实现超市扫码仪计费
2018/05/30 Python
对Python 内建函数和保留字详解
2018/10/15 Python
Python requests模块实例用法
2019/02/11 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
Champion官网:美国冠军运动服装
2017/01/25 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
生产班组长岗位职责
2014/01/05 职场文书
捐款倡议书范文
2014/02/02 职场文书
会计员岗位职责
2014/03/15 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
OpenCV实现普通阈值
2021/11/17 Java/Android