diff --git a/src/views/ebiz/generateImg/generateImg.vue b/src/views/ebiz/generateImg/generateImg.vue
index e63fdde93..7379b6c0c 100644
--- a/src/views/ebiz/generateImg/generateImg.vue
+++ b/src/views/ebiz/generateImg/generateImg.vue
@@ -16,8 +16,8 @@
-
-
+
+
@@ -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 = '';