前端截长图这件破事

昨天的文章：element-ui 按需引入包体是全部引入的3+倍

为啥说前端截图是件破事呢？因为它相比与移动端来说，太难了，移动端一个 API 搞定！

前端截图主要有两个思路：

思路一：canvas、svg

利用原生 api 直接导出图片，有 canvas、svg，也就是说如果你想导出图片，前提是页面是通过 canvas 或者是 svg 实现的，或者能够转换成这两种。

先说 canvas

canvas 相当于给你提供了一个画布，然后需要你把想要显示的内容画到这个画布上。这种方式对于简单的页面还好，如果对于复杂页面来说，实现成本就太高了。

但是现实中，我们的前端页面使用的都是 HTML，那么如何把 HTML 转换成 canvas？最为典型的开源库是 html2canvas，它的原理就是把 DOM 转换成 canvas。但它处理复杂的 DOM 结构无法正常工作。

canvas 可支持转换成 data:url 和 Blob 对象：

var canvas = document.getElementById('canvas');

canvas.toBlob(function(blob) {
  var newImg = document.createElement('img'),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});

var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;