<template>
<view id="appdom" class="uni-container" v-if="srcUrl">
<web-view :src="srcUrl" @message="receiveData"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
srcUrl: ""
}
},
onLoad(optinos) {
let id = optinos.id
console.log('id=>', id);
let token = this.$tui.getToken();
this.srcUrl = `/hybrid/html/index.html?token=${encodeURIComponent(token)}&id=${encodeURIComponent(id)}`
// #ifdef APP-PLUS
plus.screen.lockOrientation('landscape-primary'); //锁定横屏
plus.navigator.setFullscreen(true); //隐藏状态栏(应用全屏:只能隐藏状态栏,标题栏和虚拟返回键都还可以显示)
// #endif
// this.updaterpxBase();
// window.addEventListener('resize', this.updaterpxBase);
},
methods: {
receiveData(data) {
console.log("收到来自webview的消息:", JSON.stringify(data))
// {"type":"message","target":{},"currentTarget":{},"timeStamp":1730172200361,"detail":{"data":[{"id":"1847571867993395202","msg":"截屏"}]}}
let dt = JSON.parse(JSON.stringify(data))
if (dt.detail.data[0].msg == "截屏") {
console.log('----------------------------', '截屏')
let that = this;
var pages = getCurrentPages();
var page = pages[pages.length - 1];
console.log("当前页" + (pages.length - 1));
var bitmap = null;
var currentWebview = page.$getAppWebview();
// #ifdef APP-PLUS
// bitmap = new plus.nativeObj.Bitmap('amway_img');
bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now());
// 将webview内容绘制到Bitmap对象中
// 延迟截取,确保页面完全渲染
uni.showLoading({
mask: true,
title: '请稍候...'
});
currentWebview.draw(bitmap, function() {
console.log('截屏绘制图片成功');
let png = 'img' + Date.now() + ".png"
console.log(png)
bitmap.save("_doc/" + png, {}, function(i) {
console.log('保存图片成功:' + JSON.stringify(i));
// pageImage.value = i.target;
that.$api.uploadimg({
file: i.target,
id: dt.detail.data[0].id
}).then(res => {
if (res.code == 200) {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
})
}, function(e) {
console.log('保存图片失败:' + JSON.stringify(e));
});
}, function(e) {
console.log('截屏绘制图片失败:' + JSON.stringify(e));
});
// #endif
}
},
}
}
</script>
<style>
</style>
在 index.html 引入官方 uni.webview.1.5.6.js 点击一个点击事件
uni.postMessage({
data: {
msg: '截屏',
id: that.captureid
}
});
截取手机界面视频画面是黑色的问题没有解决