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

最新推荐文章于 2024-08-07 03:42:29 发布

建安七子

最新推荐文章于 2024-08-07 03:42:29 发布

阅读量4.2k

点赞数

分类专栏： js 文章标签： js javascript 截图 svg

本文链接：https://blog.csdn.net/cowcomic/article/details/80897890

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用到JS项目

html2canvas

SVG截图还需要用到 canvg

使用方法

引入js包

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>

注意: 需要用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对象, 可以在做之前把对象先复制一份, 图搞定之后再替回去