From 50756528ee8b88a847ce83635c31ee6b165f78c7 Mon Sep 17 00:00:00 2001 From: Hera Zhao Date: Thu, 9 Apr 2026 09:17:55 +0000 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=9F=A5=E8=AF=86=E5=8D=A1=E4=BF=9D?= =?UTF-8?q?=E5=AD=98=E5=9B=BE=E7=89=87=E6=B5=81=E7=A8=8B=E4=B8=8E=E9=85=8D?= =?UTF-8?q?=E6=96=B9=E5=8D=A1=E5=AE=8C=E5=85=A8=E4=B8=80=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit html2canvas截图→dataUrl→saveImageFromUrl，跟配方卡片saveImage一模一样。 不再用captureAndSave封装。 Co-Authored-By: Claude Opus 4.6 (1M context) --- frontend/src/views/OilReference.vue | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/frontend/src/views/OilReference.vue b/frontend/src/views/OilReference.vue index da11898..a50e4c8 100644 --- a/frontend/src/views/OilReference.vue +++ b/frontend/src/views/OilReference.vue @@ -727,14 +727,23 @@ function exportPDF() { setTimeout(() => w.print(), 500) } -// Save a specific element as image (mobile: share, desktop: download) +// Save element as image — same flow as recipe card: +// 1. html2canvas → dataUrl 2. saveImageFromUrl (share/popup/download) async function saveElementAsImage(el, name) { - if (!el) { ui.showToast('保存失败'); return } + if (!el) { ui.showToast('找不到卡片'); return } try { - const { captureAndSave } = await import('../composables/useSaveImage') - const ok = await captureAndSave(el, name) - if (ok) ui.showToast('图片已保存') - } catch { + const html2canvas = (await import('html2canvas')).default + const { saveImageFromUrl } = await import('../composables/useSaveImage') + // Hide buttons during capture + const btns = el.querySelectorAll('button') + btns.forEach(b => { b._d = b.style.display; b.style.display = 'none' }) + const canvas = await html2canvas(el, { scale: 2, backgroundColor: '#fff', useCORS: true }) + btns.forEach(b => b.style.display = b._d || '') + const dataUrl = canvas.toDataURL('image/png') + const result = await saveImageFromUrl(dataUrl, name) + if (result === 'shared' || result === 'downloaded') ui.showToast('图片已保存') + } catch (e) { + console.error('saveElementAsImage:', e) ui.showToast('保存失败') } } @@ -746,7 +755,6 @@ function saveContraImage() { saveElementAsImage(contraCardRef.value, '精油使用禁忌') } function saveCardImage(name) { - // Oil knowledge card modal const el = document.querySelector('.oil-card-modal') saveElementAsImage(el, name + '_精油知识卡') }