html标签 导出图片

        在做项目的时候，有这么一种需求，把html页面上的某部分内容保存下来，截图保存是一种方式，除此之外，还可以使用把dom元素转成canvas，然后导出png图片。推荐一个js插件html2canvas，接着说下具体步骤。

1、引入html2canvas.js

        html2canvas.js文件下载地址：http://html2canvas.hertzen.com/

2、使用html2canvas生成canvas

           有了canvas对象后，可以把它添加到页面上，也可以将其导出，echars图表就是通过canvas导出一张图片。

      <script src="../lib/html2canvas.js"></script>
      <script type="text/javascript">
          //  不一定是document.body，DOM元素都行
          html2canvas(document.body).then(function(canvas) {
              document.body.appendChild(canvas);    //把html转成的canvas添加到页面
              setTimeout(function() {
                  var imgURL = canvas.toDataURL("image/png");
                  var $a = document.createElement('a');
                  $a.setAttribute("href", imgURL);
                  $a.setAttribute("download", "canvas.png");  
                  $a.click();
              },5000)     //延迟导出只是为了模拟鼠标单击触发
          });
      </script>