本文已参与「新人创作礼」活动,一起开启掘金创作之路。
前言
最近在做需求的时候,碰上了需要在xgplayer 西瓜播放器中截图的情况,具体是需要实现一个按钮,点击过后实现当前页面截图。
官方自带的方法只能在播放器下方多出来一个按钮,具体下面再来讲述。
需求和实现
具体的需求是我需要在播放器外面实现一个按钮,去调用播放器的截图功能,然后获取到截取的图片。
关于xgplayer提供的截图方法
xgplayer官方提供的截图方法,就是在new Player的时候添加上screenShot参数,这个参数可以设定一个值为saveImg,默认是为true的,就是在点击截图后保存图片,不想保存图片就把这个值设置为false就可以了。
获取图片的数据
xgplayer提供给我们的关于截图的方法只有一段话
然后还是要去涉及到源码层面才能看到具体的方法。 先是在issues中搜索了一下screenShot看一下之前是否有人提起过这个的使用,发现了一条issues:
其中就提到了刚刚上面说到的,通过设定saveImg的值就能够禁止下载,还有一个重要的点:
player.on('screenShot', screenShotImg => {})
复制代码
在player上可以订阅关于截图的相关事件,并且返回一个参数,通过在浏览器实践,发现返回的参数就是我们要的图片:
但是现在我们还是只能通过官方提供的按钮来实现截图,接下去就是要自己定义一个方法来调用截图事件。
定义截图方法
通过阅读源码我们可以发现:
screenShot是一个挂载在player上的方法,传入了一个默认参数save=true,这就是定义了保存图片默认是为true的。
然后我们不难发现,player通过监听了screenShotBtnClick这个事件后就调用了截图的方法,所以我们就可以在获取到的player上来发布一个点击事件去调用这个监听事件。
function getScreenShot() {
player.emit("screenShotBtnClick");
}
复制代码
接下来我们就只需要调用这个函数,就可以实现截图了。可以把这个函数绑定在一个元素上,就可以实现点击外部的元素来截图,这里我先随便定义了一个按钮来做实验:
<div class="aaa">截图</div>
复制代码
let aaa = document.querySelector(".aaa");
aaa.addEventListener("click",getScreenShot);
复制代码
这个按钮成功获取到了图片和数据。
总结
关于这个按钮源码的方法具体是使用到了发布订阅的一个知识,具体只要学过的小伙伴在看到 on 之后应该也能想到这一个思路,关于发布订阅模式在大部分的场景使用还是非常频繁的,具体不懂的小伙伴可以阅读我的另一篇文章。