实现xgplayer 西瓜播放器截图自定义功能

前言

最近在做需求的时候，碰上了需要在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);

这个按钮成功获取到了图片和数据。