hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-11 07:26:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化贺报下载与分享6

Browse Source
This commit is contained in:
xuxingjun
2024-12-20 17:37:29 +08:00
parent 7437aa2759
commit ee4be9e6f4
1 changed files with 117 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/views/ebiz/generateImg/generateImg.vue
View File

@@ -16,8 +16,8 @@
<div class="flex justify-content-s bottom-btn border-color"> <div class="flex justify-content-s bottom-btn border-color">
<!-- <van-button square type="default" :disabled="shareJin" size="large" @click="shareImg" v-no-more-click="1000"> 分享 </van-button> --> <!-- <van-button square type="default" :disabled="shareJin" size="large" @click="shareImg" v-no-more-click="1000"> 分享 </van-button> -->
<!-- <van-button square type="danger" :disabled="downLoadJin" size="large" @click="downLoadImagesFunc" v-no-more-click="1000"> 下载 </van-button> --> <!-- <van-button square type="danger" :disabled="downLoadJin" size="large" @click="downLoadImagesFunc" v-no-more-click="1000"> 下载 </van-button> -->
<button class="shareImg" @click="fenxiang"> 分享 </button> <button class="shareImg" @click="fenxiang()"> 分享 </button>
<button class="downLoad" @click="downLoadImagesFunc"> 下载 </button> <button class="downLoad" @click="domToImage()"> 下载 </button>
</div> </div>
<div class="close" @click="close()"> <div class="close" @click="close()">
<van-icon name="cross" size="38" color="#fff" /> <van-icon name="cross" size="38" color="#fff" />
@@ -102,66 +102,125 @@ export default {
}) })
}, },
// 生成图片并下载 // 生成图片并下载
async domToImage() { domToImage() {
let domElement = this.$refs.generateImg // let domElement = this.$refs.generateImg
// console.log('this.$refs.generateImg',domElement);
// console.log(location);
// html2canvas(domElement, {
// width: domElement.offsetWidth,
// height: domElement.offsetHeight,
// backgroundColor: '#fff',
// scale: 1,
// dpi: 300
// }).then((canvas) => {
// // 转换canvas为PNG图片并压缩
// canvas.toBlob(
// (blob) => {
// // const a = document.createElement('a')
// // a.href = URL.createObjectURL(blob)
// // a.download = '业绩贺报.png'
// // a.click()
// // let newimg = new Image()
// // newimg.src = URL.createObjectURL(blob)
// // newimg.onload = function () {
// // URL.revokeObjectURL(newimg.src)
// // callback(newimg)
// // }
// this.blobToBase64(blob).then((base64String) => {
// console.log('xing');
// base64Excel({ base64Img: base64String }).then(res => {
// if (res.result == '0') {
// console.log('xingxing');
// if(this.downLoadJin == false) {
// this.downLoadJin = true
// EWebBridge.webCallAppInJs('download', {
// name: '业绩贺报.png',
// url: res.path
// })
// .then(() => {
// console.log('下载完成')
// })
// .catch(() => {
// this.$toast.fail('图片下载失败，请重新下载！')
// })
// }
// setTimeout(() => {
// this.downLoadJin = false
// }, 5000);
// }
// })
// })
// },
// 'image/png'
// // quality
// )
// })
let domElement = this.$refs.generateImg;
async function captureAndProcessImage() {
try {
// 获取 DOM 元素
console.log('this.$refs.generateImg', domElement); console.log('this.$refs.generateImg', domElement);
console.log('location',location); console.log(location);
await html2canvas(domElement, {
// 使用 html2canvas 捕获图像，并等待其完成
const canvas = await html2canvas(domElement, {
width: domElement.offsetWidth, width: domElement.offsetWidth,
height: domElement.offsetHeight, height: domElement.offsetHeight,
backgroundColor: '#fff', backgroundColor: '#fff',
scale: 1, scale: 1,
dpi: 300 dpi: 300
}).then((canvas) => { });
// 转换canvas为PNG图片并压缩
canvas.toBlob( // 将画布转换为 Blob，并等待其完成
(blob) => { const blob = await new Promise((resolve, reject) => {
// const a = document.createElement('a') canvas.toBlob(resolve, 'image/png');
// a.href = URL.createObjectURL(blob) });
// a.download = '业绩贺报.png' console.log(blob);
// a.click() // 将 Blob 转换为 Base64 字符串，并等待其完成
// let newimg = new Image() const base64String = await new Promise((resolve, reject) => {
// newimg.src = URL.createObjectURL(blob) const reader = new FileReader()
// newimg.onload = function () { reader.onloadend = () => resolve(reader.result)
// URL.revokeObjectURL(newimg.src) reader.onerror = reject
// callback(newimg) reader.readAsDataURL(blob)
// } })
this.blobToBase64(blob).then((base64String) => {
console.log('xing'); // 调用 base64Excel 函数，并等待其完成
base64Excel({ base64Img: base64String }).then(res => { const res = await base64Excel({ base64Img: base64String });
if (res.result == '0') {
// 检查结果，并处理下载逻辑
if (res.result === '0') {
console.log('xingxing'); console.log('xingxing');
if(this.downLoadJin == false) { // if (!this.downLoadJin) {
this.downLoadJin = true // this.downLoadJin = true;
EWebBridge.webCallAppInJs('download', { // 调用原生应用下载接口，并等待其完成
await EWebBridge.webCallAppInJs('download', {
name: '业绩贺报.png', name: '业绩贺报.png',
url: res.path url: res.path
}) });
.then(() => { console.log('下载完成');
console.log('下载完成') // } else {
}) // // this.$toast.fail('已有下载任务在进行，请稍后再试！');
.catch(() => { // }
this.$toast.fail('图片下载失败，请重新下载！') // 5 秒后重置下载标志
}) // setTimeout(() => {
// this.downLoadJin = false;
// }, 5000);
}
} catch (error) {
// 处理整个过程中的任何错误
console.error('Error capturing or processing the image:', error);
// this.$toast.fail('图片处理或下载失败，请重试！');
} }
setTimeout(() => {
this.downLoadJin = false
}, 5000);
} }
}) // 调用 captureAndProcessImage 函数
captureAndProcessImage();
})
}, },
'image/png'
// quality
)
})
},
// downLoadImagesFunc() {
// this.domToImage(this.$refs.generateImg)
// },
close() { close() {
this.$emit('child-colse', '1') this.$emit('child-colse', '1')
this.$refs.generateImg.src = ''; this.$refs.generateImg.src = '';