废话不多说先上代码!!!!
点击截图按钮触发以下方法
getCapture() {
let _this = this
let pages = getCurrentPages();
let page = pages[pages.length - 1];
let ws = page.$getAppWebview();
let bitmap = new plus.nativeObj.Bitmap('test');
// 将webview内容绘制到Bitmap对象中
ws.draw(bitmap,function(){
setTimeout(function() {
this.base64img = ''
console.log('截屏绘制图片成功');
// 将原生Bitmap转换成Base64字符串
_this.base64img = bitmap.toBase64Data();
this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
this.videoContext.play();
//console.log('截屏图片===='+_this.base64img);
bitmap.clear(); // 清除Bitmap对象
}, 100);
},(e) => {
console.log('截屏绘制图片失败:', e);
bitmap.clear(); // 清除Bitmap对象
},
{
check: true, // 设置为检测白屏
clip: { top: uni.getSystemInfoSync().statusBarHeight + 75, left: '0px', height: '300px', width: '100%' } // 设置截屏区域
}
);
},
但是,这个方法不全面,在此之前需要暂停视频播放来实现截图,否则可能会出现截图为黑图的bug
this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
this.videoContext.pause();
这句话你可以放在截图按钮触发的方法中,这两句话的作用就是指向你的video组件并且暂停播放,然后使用延时函数把上面方法放到该延时函数中调用,方法如下
takeScreenshot() {
this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
this.videoContext.pause();
let _this = this
setTimeout(function(){
_this.$nextTick(() => {
_this.getCapture();
});
},500)
},
如果对官网文档感兴趣,自行点击查看:HTML5+ API Reference