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

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

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

一、导入html2canvas.js

这个不需要多说,可以从github上获取: https://github.com/niklasvh/html2canvas

也可以直接导入链接: <script src=http://www.cppcns.com/web/html5/"https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js">

使用起来也非常简单,具体的API可以去网上查找,生成png图片使用“image/png”即可。

其中$("#xxx")为你想要截取的div,外面可以通过jquery获取它,当然document获取也是可以的。

html2canvas($("#xxx"), {
        >二、svg无法截取的问题

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

可以看到,流程图的线没有截取到,也就是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, {
     >四、只能截取可视部分的问题

如果需要截取的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, {
           >

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

扫一扫手机访问