本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
最近在做需求的时候，碰上了需要在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 之后应该也能想到这一个思路，关于发布订阅模式在大部分的场景使用还是非常频繁的，具体不懂的小伙伴可以阅读我的另一篇文章。