昨天的文章: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;