From cc9d93b3ae5eb05b1c91e46222cb7ae7ea42fd4c Mon Sep 17 00:00:00 2001 From: xuxingjun Date: Wed, 25 Dec 2024 14:09:02 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E8=B4=BA=E6=8A=A5=E4=B8=8B?= =?UTF-8?q?=E8=BD=BD=E7=9A=84=E6=96=B9=E6=B3=954?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ebiz/generateImg/generateImg.vue | 139 ++++++++------------- 1 file changed, 55 insertions(+), 84 deletions(-) diff --git a/src/views/ebiz/generateImg/generateImg.vue b/src/views/ebiz/generateImg/generateImg.vue index ac1ddbed4..0725a7bff 100644 --- a/src/views/ebiz/generateImg/generateImg.vue +++ b/src/views/ebiz/generateImg/generateImg.vue @@ -17,7 +17,7 @@ - +
@@ -161,57 +161,67 @@ export default { let domElement = this.$refs.generateImg; async function captureAndProcessImage() { - try { + console.log(1111); + try { // 获取 DOM 元素 - console.log('this.$refs.generateImg', domElement); - console.log(location); + console.log('this.$refs.generateImg', domElement); + console.log(location); + console.log(2222); - // 使用 html2canvas 捕获图像，并等待其完成 - const canvas = await html2canvas(domElement, { - width: domElement.offsetWidth, - height: domElement.offsetHeight, - backgroundColor: '#fff', - scale: 1, - dpi: 300 - }); + // 使用 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) - }) + // 将画布转换为 Blob，并等待其完成 + const blob = await new Promise((resolve, reject) => { + canvas.toBlob(resolve, 'image/png'); + console.log(3333); + }); + // let arr = false + // // 将 Blob 转换为 Base64 字符串，并等待其完成 + // if(arr == false) { + // arr = true + var base64String = await new Promise((resolve, reject) => { + const reader = new FileReader() + reader.onloadend = () => resolve(reader.result) + reader.onerror = reject + reader.readAsDataURL(blob) + console.log(4444); + }) + // } - // 调用 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); - } + // 调用 base64Excel 函数，并等待其完成 + const res = await base64Excel({ base64Img: base64String }); + + // 检查结果，并处理下载逻辑 + if (res.result === '0') { + console.log(5555); + // 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); + // arr = false + } } catch (error) { + console.log(6666); // 处理整个过程中的任何错误 console.error('Error capturing or processing the image:', error); // this.$toast.fail('图片处理或下载失败，请重试！'); @@ -221,45 +231,6 @@ export default { // 调用 captureAndProcessImage 函数 captureAndProcessImage(); }, - downloadFn() { - html2canvas(this.$refs.generateImg).then(canvas => { - // 可以在这里处理canvas，如显示、保存等 - // 示例：将canvas内容转换为图片并触发下载 - var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); - var link = document.createElement('a'); - link.download = '业绩贺报.png'; - link.href = image; - link.click(); - }); - }, - // getUrlBase64(url, kh) { - // return new Promise((resolve) => { - // let canvas = document.createElement('canvas'); - // const ctx = canvas.getContext('2d'); - // const img = new Image(); - // img.crossOrigin = 'Anonymous'; // 允许跨域 - // img.src = url; - // img.onload = () => { - // // eslint-disable-next-line prefer-destructuring - // canvas.height = kh[1]; - // // eslint-disable-next-line prefer-destructuring - // canvas.width = kh[0]; - // ctx.drawImage(img, 0, 0, kh[0], kh[1]); - // const dataURL = canvas.toDataURL('image/png'); - // canvas = null; - // resolve(dataURL); - // }; - // }); - // }, - // download(imgUrl, kh) { - // this.getUrlBase64(imgUrl, kh).then((base64) => { - // const link = document.createElement('a'); - // link.href = base64; - // link.download = `业绩贺报.png`; - // link.click(); - // // this.$toast('下载成功') - // }); - // }, close() { this.$emit('child-colse', '1') this.$refs.generateImg.src = '';