使用JS进行页面截图, 包括SVG的支持

野性酷女 2022-05-21 07:55 190阅读 0赞

用到JS项目

**html2canvas**

SVG截图还需要用到 **canvg**

使用方法

引入js包

注意: 需要用jq3以上版本, 1.8的各版本会报错

增加js代码, 可以放到一个button的click事件里面

html2canvas($("#container"), { // $("#container")是你要复制生成canvas的区域，可以自己选
            onrendered: function (canvas) {
              dataURL = canvas.toDataURL("image/png");
    
              //下载图片, dataURL 实际是图片的BASE64编码, 不是图片的url地址, 此时图片还没有url
    
              //open_button是一个打开图片的按钮
              $('#open_button').attr('href', dataURL);
            },
          })

普通网页的截图这样就可以了

但是SVG图形这样就不行了, 截出来始终是空白, 因此需要另一个项目canvg

需要在html2canvas之前加入以下代码

scrollTo(0, 0);
          var nodesToRecover = [];
          var nodesToRemove = [];
          var svgElem = $("#container").find('svg');//divReport为需要截取成图片的dom的id
          svgElem.each(function (index, node) {
            var parentNode = node.parentNode;
            var svg = node.outerHTML.trim();
    
            var canvas = document.createElement('canvas');
            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);
          });

这个会把选择的容器内的svg对象转化成canvas对象, 后面再接html2canvas就行了

注意: 这段代码会替换原始的html对象, 可以在做之前把对象先复制一份, 图搞定之后再替回去