将界面转化成图片存储到手机相册,主要为toImage方法(适用于安卓iOS,h5和小程序不适用)
<template>
<view class="uni-forms container" id="test">
<view class="uni-forms-item">
<view class="uni-forms-item__label">姓名</view>
<input type="text" focus="true" class="uni-easyinput" placeholder="请输入姓名" v-model="form.name" />
</view>
<view>
<button type="default" form-type="submit" @click="formSubmit">提交</button>
<button type="default" form-type="reset" @click="formReset">重置</button>
<button type="default" @click="toImage">截屏</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
form: {
name: null
},
test: ''
}
},
behaviors: ['uni://form-field'],
methods: {
formSubmit: function(e) {
console.log(e);
// console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
// var formdata = e.detail.value
uni.showModal({
content: '表单数据内容:' + JSON.stringify(this.form),
showCancel: false
});
},
formReset: function(e) {
console.log('清空数据')
},
/* 截图 */
toImage() {
const that = this;
const pages = getCurrentPages();
// 获取到当前页面
const page = pages[pages.length - 1];
const ws = page.$getAppWebview();
/* 获取屏幕信息 */
// let ws = this.$mp.page.$getAppWebview();
let bitmap = new plus.nativeObj.Bitmap('test');
ws.draw(bitmap, function() {
console.log('截屏绘制图片成功');
let fileName = '_doc/' + new Date().getTime() + '.png'
bitmap.save(fileName, {}, function(i) {
console.log('bitmap保存图片成功:' + JSON.stringify(i));
// 将图片保存到相册
uni.saveImageToPhotosAlbum({
filePath: i.target,
success: function() {
bitmap.clear(); //销毁Bitmap图片
uni.$u.toast('保存图片成功')
}
});
}, function(e) {
console.log('保存图片失败:' + JSON.stringify(e));
});
}, function(e) {
console.log('截屏绘制图片失败:' + JSON.stringify(e));
});
}
}
}
</script>