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 + '_精油知识卡') }