···
let me = this;
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var bitmap = null;
var currentWebview = page.$getAppWebview();
bitmap = new plus.nativeObj.Bitmap('amway_img');
const { top, left, height, width } = await this.$u.getRect('.capture-container');
// 将webview内容绘制到Bitmap对象中
currentWebview.draw(
bitmap,
function() {
bitmap.save(
'_doc/a.jpg',
{},
function(i) {
me.$set(me.edit, 'evidenceImage', i.target);
},
function(e) {
console.log('保存图片失败：' + JSON.stringify(e));
}
);
},
function(e) {
console.log('截屏绘制图片失败：' + JSON.stringify(e));
},
{
clip: {
top: top + uni.getSystemInfoSync().statusBarHeight + 44,
left,
width: '96%',
height: top + uni.getSystemInfoSync().statusBarHeight + 44 + height
}
}
);
···
1***@qq.com
- 发布：2020-07-14 10:40
- 更新：2022-07-14 22:09
- 阅读：1509
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 10
HBuilderX类型： 正式
HBuilderX版本号： 2.7.14
手机系统： Android
手机系统版本号： Android 10
手机厂商： 小米
手机机型： p20
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
···
<template>
<video
src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
style="{ height: '252rpx', width: '702rpx' }"
class="capture-container"
@timeupdate="handleTimeUpdate"
/>
<button @click="capture“>抓</button>
</template>
<script>
export default {
methods: {
async capture() {
// const abc = await captureImage(
// 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
// this.currentTime * 1000000
// );
// this.edit.evidenceImage = abc
let me = this;
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var bitmap = null;
var currentWebview = page.$getAppWebview();
bitmap = new plus.nativeObj.Bitmap('amway_img');
const { top, left, height, width } = await this.$u.getRect('.capture-container');
// 将webview内容绘制到Bitmap对象中
currentWebview.draw(
bitmap,
function() {
bitmap.save(
'_doc/a.jpg',
{},
function(i) {
me.$set(me.edit, 'evidenceImage', i.target);
},
function(e) {
console.log('保存图片失败：' + JSON.stringify(e));
}
);
},
function(e) {
console.log('截屏绘制图片失败：' + JSON.stringify(e));
},
{
clip: {
top: top + uni.getSystemInfoSync().statusBarHeight + 44,
left,
width: '96%',
height: top + uni.getSystemInfoSync().statusBarHeight + 44 + height
}
}
);
}
}
}
</script>
···
@timeupdate="handleTimeUpdate"
/>
<button @click="capture“>抓</button>
</template>
<script>
export default {
methods: {
async capture() {
// const abc = await captureImage(
// 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
// this.currentTime * 1000000
// );
// this.edit.evidenceImage = abc
let me = this;
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var bitmap = null;
var currentWebview = page.$getAppWebview();
bitmap = new plus.nativeObj.Bitmap('amway_img');
const { top, left, height, width } = await this.$u.getRect('.capture-container');
// 将webview内容绘制到Bitmap对象中
currentWebview.draw(
bitmap,
function() {
bitmap.save(
'_doc/a.jpg',
{},
function(i) {
me.$set(me.edit, 'evidenceImage', i.target);
},
function(e) {
console.log('保存图片失败：' + JSON.stringify(e));
}
);
},
function(e) {
console.log('截屏绘制图片失败：' + JSON.stringify(e));
},
{
clip: {
top: top + uni.getSystemInfoSync().statusBarHeight + 44,
left,
width: '96%',
height: top + uni.getSystemInfoSync().statusBarHeight + 44 + height
}
}
);
}
}
}
</script>
···
预期结果：
截屏视频画面
截屏视频画面
实际结果：
纯黑视频
纯黑视频
bug描述：
需求： 截取屏幕上面的video标签作为 图片
webview.draw(bitmap）用的这个api
采用原生video标签
这个用video标签 一直是黑色的
使用renderjs使用H5的video标签
截取出来是白色的 无内容
这个算是bug吗？
1***@qq.com (作者)
通过H5的方式搞出来了虽然不是很优雅但是可以用
Canvas.toDataUrl()这个 安卓 api2.1版本就可以用了 没有兼容性问题
<button class="capture-button button orange" @click="videomodule.capture">截取照片</button>
<template>
<view class="padding-base background-white">
<view id="video-container" :style="{ height: '320rpx', width: '702rpx' }"></view>
</view>
<button class="capture-button button orange" @click="videomodule.capture">截取照片</button>
</template>
<script>
export defualt {
methods: {
updateImage(base64) {
let bitmap = new plus.nativeObj.Bitmap(new Date().valueOf());
let me = this;
bitmap.loadBase64Data(
base64,
() => {
bitmap.save(
`_doc/${new Date().valueOf()}.jpg`,
{},
function(i) {
me.$set(me.edit, 'evidenceImage', i.target);
},
function(e) {
console.log('保存图片失败：' + JSON.stringify(e));
}
);
},
err => {
console.log(err);
}
);
},
}
}
</script>
<script lang="renderjs" module="videomodule">
export default {
data() {
return {
videoElement: undefined
}
},
mounted() {
this.init()
},
methods: {
capture() {
let video = this.videoElement
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d')
.drawImage(video, 0, 0, canvas.width, canvas.height);
this.$ownerInstance.callMethod('updateImage', canvas.toDataURL())
},
init() {
const video = document.createElement('video')
this.videoElement = video
video.id = 'thisvideo'
video.style.height = '100%'
video.style.width = '100%'
video.style['z-index'] = 100
video.src= 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
video.controls = true
video.autoplay = true
setTimeout(() => {
video.pause()
})
document.getElementById('video-container').appendChild(video)
}
}
}
</script>
FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ：543610866
VLC多媒体播放器、支持rtsp、rtmp、mms、ftp、udp/rtp等等大多数格式、截图、录制、速率、快进、倒退、音量、窗口缩放、视频纵横比、音轨等等：https://ext.dcloud.net.cn/plugin?id=8762
