android easyplayer截屏,TSINGSEE青犀视频开发EasyWasmPlayer H265播放器是如何实现视频截图功能的？...

原标题：TSINGSEE青犀视频开发EasyWasmPlayer H265播放器是如何实现视频截图功能的？

在我们做视频开发的过程中，会遇到不少需求，其中视频截图就是一个比较常见的需求，因此TSINGSEE青犀视频不管是在设计视频平台还是视频播放器的时候，我们都会在原有开发的基础上对视频截图进行一些功能拓展。

TSINGSEE青犀视频开发的H265播放器截图功能主要利用canvas实现，用canvas的绘画能力画出视频某一帧的视频画面，获得到图像之后转换成图像，再利用a标签实现自动保存到本地。

1、首先在播放器上选一个合适的位置放置截图图标。这边选择在播放器控制栏下加入截图按钮。

实现:

在项目中找到SyncPlayer.js，插入截图按钮样式代码并添加点击监听事件。

//截图

this.snap = document.('span'); // 插入dom盒子用来展示图标

this.snap.classList = "fa fa-camera snap"; // 插入图标class类

this.snap.title = '截图';

this.timeBox.(this.snap); // 把截图盒子插入timeBox控制栏中(timeBox为控制栏盒子)

this.snap.onclick = function () {

self.savePic()

}

2.截图方法实现，当截图按钮点击调用截图的方法。

savePic() {

var fileName = common.fileDateName();

var strDataURL= '';

var timeSnap = 0;

// 找到需要截图的video标签

var video = this.playerUI.children[2];

var canvas = (window.canvas = document.("canvas"));

if (video.localName == "video") {

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

} else {

canvas.width = video.width;

canvas.height = video.height;

}

canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);

// 获取bash64图像数据

strDataURL = canvas.toDataURL("image/png");

//判断截图是否为空，为空重新截图

if (strDataURL.indexOf('iVBORw0KGgoAAAANSUhEUgAAAtAAAAUACAYAAABuzmU9AAAgAElEQVR4Xu3WoREAAAjEMNh/aVagPuhXOUR3HAECBAgQIECAAAECb4F9Lw0JECBAgAABAgQIEBgB7QkIECBAgAABAgQIBAE') !== -1) {

timeSnap = setInterval(() => {

canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);

strDataURL = canvas.toDataURL("image/png");

if (strDataURL.indexOf('iVBORw0KGgoAAAANSUhEUgAAAtAAAAUACAYAAABuzmU9AAAgAElEQVR4Xu3WoREAAAjEMNh/aVagPuhXOUR3HAECBAgQIECAAAECb4F9Lw0JECBAgAABAgQIEBgB7QkIECBAgAABAgQIBAE') !== -1) {

} else {

clearInterval(timeSnap)

timeSnap = 0

downloadImg()

}

}, 10);

} else {

downloadImg()

}

// 下载截图

function downloadImg() {

var arr = strDataURL.split(","),

mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]),

n = bstr.length,

u8arr = new Uint8Array(n);

while (n--) { u8arr[n] = bstr.charCodeAt(n) }

var blob = new Blob([u8arr], {type: mime});

var url = window.URL.createObjectURL(blob);

var a = document.("a");

a.style.display = "none";

var html = `

下载

复制编码

`;

var imgPage = window.open("","_blank");

imgPage.document.body.style.backgroundColor = '#000'

imgPage.document.body.style.textAlign = 'center'

imgPage.document.body.innerHTML = html

document.body.(a);

setTimeout(function () {

document.body.removeChild(a);

window.URL.revokeObjectURL(url);

}, 1000);

}

}

3.点击后会跳转一个新的页面预览图像，右上角提供图像数据和屏图片下载，下载下来的图片展现如下：

责任编辑：