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