<template>
<view>
<!--VIDEO标签父元素-->
<video id="myVideo" autoplay style="height:750rpx;width:750rpx;"
src="https://repo.bfw.wiki/bfwrepo/video/modushanghai.mp4"></video>
<image :src="shot" style="width: 100%;height: 200px;"></image>
<button @click="doshot">截图</button>
</view>
</template>
<script>
export default {
data() {
return {
shot: "",
}
},
methods: {
doshot() {
this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
this.videoContext.pause();
this.$nextTick(() => {
this.getCapture()
})
},
getCapture() {
let pages = getCurrentPages();
let page = pages[pages.length - 1];
let currentWebview = page.$getAppWebview()
var bitmap = new plus.nativeObj.Bitmap('csreen');
// 将webview内容绘制到Bitmap对象中
currentWebview.draw(bitmap, () => {
console.log('截屏绘制图片成功');
// 将原生Bitmap转换成Base64字符串
this.shot = bitmap.toBase64Data()
this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
this.videoContext.play();
//这里我将文件名用四位随机数拼接了,不然会出现当前图片替换上一张图片只能保存一张图片的问题
let rand = Math.floor(Math.random() * 10000)
let saveUrl = '_doc/' + rand + 'a.jpg'
bitmap.save(saveUrl, {}, function(i) {
console.log('保存图片成功:' + JSON.stringify(i));
uni.saveImageToPhotosAlbum({
filePath: i.target,
success: function() {
bitmap.clear(); //销毁Bitmap图片
uni.showToast({
title: '保存截图成功',
duration: 1500
});
},
complete() {
uni.hideLoading();
}
});
}, function(e) {
console.log('保存图片失败:' + JSON.stringify(e));
});
}, (e) => {
console.log('截屏绘制图片失败:', e);
}, {
check: true, // 设置为检测白屏
clip: {
top: uni.getSystemInfoSync().statusBarHeight + 45,
left: '0px',
height: '266px',
width: '100%'
} // 设置截屏区域
});
}
}
}
</script>
<style>
</style> 网友回复
如何破解绕开seedance2.0真人照片生成视频 限制?
python有哪些算法可以将视频中的每个帧图片去除指定区域水印合成新的视频?
iphone的激光雷达数据能否实时传输到three三维空间中?
豆包sora等ai视频生成大模型生成的视频水印如何去除?
python如何实现在电脑上拨号打电话给手机?
具身机器人与人形机器人区别?
nodejs如何将一个完整的js代码文件切割成不同的部分混淆后动态加载进入html运行?
为啥windows.onerror捕获js错误是这样的{"message":"Script error.","source":"","lineno":0,"colno":0,"stack":null,
2026年ai将全面接管编程?
WebMCP是干啥的?


