前端实现截图

前端实现截图

今天就让我们来探索下前端的截图实现。

html2canvas

这是一个第三方库，他可以用于将html转换成canvas。下面让我们开始

	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

<div id="a">pear</div>
<button onclick="capture()">截图</button>

<script>
		function capture() {
    	html2canvas(document.getElementById("a")).then(canvas => {
        // 将Canvas转换为Blob对象
        canvas.toBlob(function(blob) {
            // 创建一个下载链接，并模拟点击
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = "screenshot.png";  // 设置下载文件名
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  // 释放URL对象
        });
    });
}
</script>

首先引入html2canvas，然后将所需要转成图片的元素传入并转成Blob对象，下载图片就搞定了，这样就是一个截图，很简单对吧。

我的微信公众号： 梨的前端小屋