hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-09 02:56: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

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

@@ -16,8 +16,8 @@
<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="danger" :disabled="downLoadJin" size="large" @click="downLoadImagesFunc" v-no-more-click="1000"> 下载 </van-button> -->
<button class="shareImg" @click="fenxiang"> 分享 </button>
<button class="downLoad" @click="downLoadImagesFunc"> 下载 </button>
<button class="shareImg" @click="fenxiang()"> 分享 </button>
<button class="downLoad" @click="domToImage()"> 下载 </button>
</div>
<div class="close" @click="close()">
<van-icon name="cross" size="38" color="#fff" />
@@ -102,66 +102,125 @@ export default {
})
},
// 生成图片并下载
async domToImage() {
let domElement = this.$refs.generateImg
console.log('this.$refs.generateImg',domElement);
console.log('location',location);
await 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);
}
domToImage() {
// 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
)
})
// })
// },
// 'image/png'
// // 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() {
this.$emit('child-colse', '1')
this.$refs.generateImg.src = '';