使用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 完美实现圆角效果
Jul 13 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 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
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
php+mysql实现无限级分类
2015/11/11 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
显示、隐藏密码
2006/07/01 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
pygame实现简易飞机大战
2018/09/11 Python
flask-restful使用总结
2018/12/04 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
就业推荐自我鉴定
2013/10/06 职场文书
英语系本科生求职信
2014/07/15 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
openstack中的rpc远程调用的方法
2021/07/09 Python
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
Java的Object类的九种方法
2022/04/13 Java/Android