😀
基于 html2canvas 编写的一个截图工具
在使用之前需要先导入html2canvas或者安装html2canvas,因为该插件依赖了html2canvas库
import
// 因为没有发布到npm上,需要手动下载
// 需要先安装html2canvas
import Canvasot from 'Canvasot';
script
<script src="html2canvas.js"></script>
<script src="Canvasot.min.js"></script>
基本使用
只要如下几个步骤就可以实现截图的功能,默认是截图后自动下载图片,如需要导出base64
数据,需注册截图成功方法。
// 实例化一个Canvasot对象,传入一个Dom截屏事件元素
let c = new Canvasot(document.getElementById('map'));
// 触发事件的按钮
const screenshotBtn = document.getElementById('screenshot');
// 触发Canvasot截屏事件
screenshotBtn.addEventListener('click', c.handleCaptrue.bind(c));
注册截图成功后方法
// 实例化一个Canvasot对象,传入一个Dom截屏事件元素
let c = new Canvasot(document.getElementById('map'));
// 触发事件的按钮
const screenshotBtn = document.getElementById('screenshot');
// 触发Canvasot截屏事件
screenshotBtn.addEventListener('click', c.handleCaptrue.bind(c));
// 注册截图后方法
c.RegisterAfterCapture(function (err, data) {
// data为base64格式
if (err) {
console.log(err);
return;
}
console.log('截图成功');
console.log(data);
});
在激活截图事件时执行传入的 callbackfn
在截图成功后执行传入的 callbackfn,默认行为下载所截的图
自由拖拽截图框没有做出限制,会溢出到边缘。
所以加了一个截全屏的功能
因为开源,让我找到一个类似的功能。不过我已经找不到最初的网址在哪了。所以很感谢提供相应的源码的工程师。我只不过是一个搬运工,将其封装罢了。