uniapp 中截图保存当前页面 ， 当前内容
发布时间 2024-01-08 04:32:21作者: 完美前端
import { ref } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app"
// #ifdef H5
import html2canvas from 'html2canvas'
// #endif
const systemInfo = ref({})
const downloadFile = () => {
uni.showLoading({ //加载框
title: '保存中...',
mask: true
})
// #ifdef H5
new html2canvas(document.getElementById('inodss'), {
allowTaint: true,
useCORS: true
}).then(canvas => {
let Img = new Image()
Img.src = canvas.toDataURL()
var imgData = canvas.toDataURL()
//保存图片
var numberFileName = parseInt(Math.random() * 1000000)
var saveFile = function (data, filename) {
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
save_link.href = data
save_link.download = filename
var event = document.createEvent('MouseEvents')
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
save_link.dispatchEvent(event)
uni.hideLoading();
uni.showToast({
title: '截图保存成功',
duration: 1500,
icon: 'none'
});
}
var filename = numberFileName + '.png'
saveFile(imgData, filename)
})
// #endif
// #ifdef APP-VUE
var pages = getCurrentPages(); //获取当前页面信息
var page = pages[pages.length - 1];
var bitmap = null;
var currentWebview = page.$getAppWebview();
bitmap = new plus.nativeObj.Bitmap('amway_img');
// 将webview内容绘制到Bitmap对象中
currentWebview.draw(bitmap, function () {
// console.log('截屏绘制图片成功');
//这里我将文件名用四位随机数拼接了，不然会出现当前图片替换上一张图片只能保存一张图片的问题
let rand = Math.floor(Math.random() * 10000)
let saveUrl = '_doc/' + rand + 'a.jpg'
bitmap.save(saveUrl, {}, function (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));
});
}, function (e) {
console.log('保存图片失败：' + JSON.stringify(e));
});
// #endif
}
onLoad(() => {
uni.getSystemInfo({
success: (res) => {
systemInfo.value = res
}
})
console.log(JSON.stringify(systemInfo.value))
})
onShow(() => {
})
</script>
<template>
<view class="jc-flex" @tap="downloadFile">
<text>截图保存</text>
</view>
<view id="inodss" class="device-info-page">
<view class="device-info-body">
111111
</view>
</view>
</template>
<style lang="scss" scoped>
</style>