有时候我们在做分享功能的时候,有些恶心的要求要求我们把整个页面给生成一张图片
如果是H5还好 可以通过html2canvas框架来实现,但uniapp写的不是html,而是组件化的
那这个时候,我们可以用他H5+的屏幕截图的途径来实现这个功能
<template>
<view class="content d-flex-center flex-direction-column vh-100" id="_poster">
<image :src="test" mode="aspectFit" class="test"></image>
</view>
</template>
<script>
export default {
data() {
return {
test: ''
};
},
onLoad() {
},
onReady() {
const that = this;
//防止切图成白屏
setTimeout(function() {
that.toImage();
}, 1000);
},
methods: {
/* 截图 */
toImage() {
const that = this;
/* 获取屏幕信息 */
let ws = this.$mp.page.$getAppWebview();
let bitmap = new plus.nativeObj.Bitmap('test');
// 将webview内容绘制到Bitmap对象中
ws.draw(
bitmap,
function(e) {
/* 获取base64 */
that.test= bitmap.toBase64Data();
/* 加载base64编码 */
bitmap.loadBase64Data(
bitmap.toBase64Data(),
function() {
console.log('加载Base64图片数据成功');
/* 保存图片 */
bitmap.save(
'_doc/share.jpg',
{},
async (i)=>{
console.log('保存图片成功:' + JSON.stringify(i));
uni.saveImageToPhotosAlbum({
filePath: i.target,
success: function() {
/* 清除 */
bitmap.clear();
that.tools.toast('保存成功,请到相册中查看')
},
fail(e) {
that.tools.toast('保存失败')
}
});
},
function(e) {
console.log('保存图片失败:' + JSON.stringify(e));
}
);
},
function() {
console.log('加载Base64图片数据失败:' + JSON.stringify(e));
}
);
},
function(e) {
console.log('截屏绘制图片失败:' + JSON.stringify(e));
},
{
check: true, // 设置为检测白屏
clip: { top: '100px', left: '0px', height: '100%', width: '100%' } // 设置截屏区域
}
);
},
};
</script>