hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-11 14:26:43 +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

173
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('this.$refs.generateImg',domElement);
console.log('location',location); // console.log(location);
await html2canvas(domElement, { // 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) => { // }).then((canvas) => {
// 转换canvas为PNG图片并压缩 // // 转换canvas为PNG图片并压缩
canvas.toBlob( // canvas.toBlob(
(blob) => { // (blob) => {
// const a = document.createElement('a') // // const a = document.createElement('a')
// a.href = URL.createObjectURL(blob) // // a.href = URL.createObjectURL(blob)
// a.download = '业绩贺报.png' // // a.download = '业绩贺报.png'
// a.click() // // a.click()
// let newimg = new Image() // // let newimg = new Image()
// newimg.src = URL.createObjectURL(blob) // // newimg.src = URL.createObjectURL(blob)
// newimg.onload = function () { // // newimg.onload = function () {
// URL.revokeObjectURL(newimg.src) // // URL.revokeObjectURL(newimg.src)
// callback(newimg) // // callback(newimg)
// } // // }
this.blobToBase64(blob).then((base64String) => { // this.blobToBase64(blob).then((base64String) => {
console.log('xing'); // console.log('xing');
base64Excel({ base64Img: base64String }).then(res => { // base64Excel({ base64Img: base64String }).then(res => {
if (res.result == '0') { // if (res.result == '0') {
console.log('xingxing'); // console.log('xingxing');
if(this.downLoadJin == false) { // if(this.downLoadJin == false) {
this.downLoadJin = true // this.downLoadJin = true
EWebBridge.webCallAppInJs('download', { // EWebBridge.webCallAppInJs('download', {
name: '业绩贺报.png', // name: '业绩贺报.png',
url: res.path // url: res.path
}) // })
.then(() => { // .then(() => {
console.log('下载完成') // console.log('下载完成')
}) // })
.catch(() => { // .catch(() => {
this.$toast.fail('图片下载失败，请重新下载！') // this.$toast.fail('图片下载失败，请重新下载！')
}) // })
} // }
setTimeout(() => { // setTimeout(() => {
this.downLoadJin = false // this.downLoadJin = false
}, 5000); // }, 5000);
} // }
}) // })
}) // })
}, // },
'image/png' // 'image/png'
// quality // // quality
) // )
// })
let domElement = this.$refs.generateImg;
async function captureAndProcessImage() {
try {
// 获取 DOM 元素
console.log('this.$refs.generateImg', domElement);
console.log(location);
// 使用 html2canvas 捕获图像，并等待其完成
const canvas = await html2canvas(domElement, {
width: domElement.offsetWidth,
height: domElement.offsetHeight,
backgroundColor: '#fff',
scale: 1,
dpi: 300
});
// 将画布转换为 Blob，并等待其完成
const blob = await new Promise((resolve, reject) => {
canvas.toBlob(resolve, 'image/png');
});
console.log(blob);
// 将 Blob 转换为 Base64 字符串，并等待其完成
const base64String = await new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(blob)
}) })
// 调用 base64Excel 函数，并等待其完成
const res = await base64Excel({ base64Img: base64String });
// 检查结果，并处理下载逻辑
if (res.result === '0') {
console.log('xingxing');
// if (!this.downLoadJin) {
// this.downLoadJin = true;
// 调用原生应用下载接口，并等待其完成
await EWebBridge.webCallAppInJs('download', {
name: '业绩贺报.png',
url: res.path
});
console.log('下载完成');
// } else {
// // this.$toast.fail('已有下载任务在进行，请稍后再试！');
// }
// 5 秒后重置下载标志
// setTimeout(() => {
// this.downLoadJin = false;
// }, 5000);
}
} catch (error) {
// 处理整个过程中的任何错误
console.error('Error capturing or processing the image:', error);
// this.$toast.fail('图片处理或下载失败，请重试！');
}
}
// 调用 captureAndProcessImage 函数
captureAndProcessImage();
}, },
// 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 = '';