From ee4be9e6f4123ca336b6def72aae15ba8720b065 Mon Sep 17 00:00:00 2001 From: xuxingjun Date: Fri, 20 Dec 2024 17:37:29 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=B4=BA=E6=8A=A5=E4=B8=8B?= =?UTF-8?q?=E8=BD=BD=E4=B8=8E=E5=88=86=E4=BA=AB6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ebiz/generateImg/generateImg.vue | 175 ++++++++++++++------- 1 file changed, 117 insertions(+), 58 deletions(-) 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 = '';