fix: 照片不变形

src/components/album_compoents/albumDrawBox.vue

@@ -104,25 +104,81 @@ async function drawWatermark(event) {
   // }
 }
 
-function drawWatermark2(img,weather) {
-  const canvas = canvasRef.value;
-  let scale = 3
-  canvas.width = img.width * scale;
-  canvas.height = img.height * scale;
-  ctx = canvas.getContext('2d');
-  ctx.scale(scale, scale)
-  ctx.drawImage(img, 0, 0, img.width, img.height);
-  drawBottom(img.width, img.height, weather)
-  // watermark.value = canvas.toDataURL();
+// function drawWatermark2(img,weather) {
+//   const canvas = canvasRef.value;
+//   let scale = 3
+//   canvas.width = img.width * scale;
+//   canvas.height = img.height * scale;
+//   ctx = canvas.getContext('2d');
+//   ctx.scale(scale, scale)
+//   ctx.drawImage(img, 0, 0, img.width, img.height);
+//   drawBottom(img.width, img.height, weather)
+//   // watermark.value = canvas.toDataURL();
+// }
+
+function drawWatermark2(img, weather) {
+  const canvas = canvasRef.value
+
+  // 1️⃣ 固定容器尺寸（关键）
+  const canvasWidth = 750
+  const canvasHeight = 1334
+
+  canvas.width = canvasWidth
+  canvas.height = canvasHeight
+
+  // 2️⃣ CSS 尺寸必须一致（防止二次拉伸）
+  canvas.style.width = canvasWidth + 'px'
+  canvas.style.height = canvasHeight + 'px'
+
+  // 将 ctx 赋值给全局变量，供 drawBottom 使用
+  ctx = canvas.getContext('2d')
+
+  // 3️⃣ 绝对不能再有 ctx.scale
+  // ctx.scale(...) ❌
+
+  // 4️⃣ 等比按宽度缩放
+  const scale = canvasWidth / img.width
+  const drawHeight = img.height * scale
+
+  // 5️⃣ 裁剪（居中）
+  const dy = (canvasHeight - drawHeight) / 2
+
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+  ctx.drawImage(img, 0, dy, canvasWidth, drawHeight)
+
+  // 传入图片实际绘制的尺寸，而不是 canvas 的尺寸
+  // 图片绘制区域：从 (0, dy) 开始，宽度 canvasWidth，高度 drawHeight
+  console.log('canvasWidth',canvasWidth)
+  console.log('drawHeight',drawHeight)
+  console.log('dy',dy)
+  // drawBottom(375, drawHeight, weather, 0, dy)
 }
 
 
+function drawImageWidth100Cover(ctx, img, canvasWidth, canvasHeight) {
+  // 以宽度为基准缩放
+  const scale = canvasWidth / img.width
+  const drawHeight = img.height * scale
+
+  // 计算裁剪（居中）
+  const dy = (canvasHeight - drawHeight) / 2
+
+  ctx.drawImage(
+    img,
+    0,
+    dy,
+    canvasWidth,
+    drawHeight
+  )
+}
+
 // console.log(data)
-const drawBottom = (imgWidth, imgHeight, weather) => {
+const drawBottom = (imgWidth, imgHeight, weather, offsetX = 0, offsetY = 0) => {
   // 设置文本样式
   ctx.font = "10px Arial";
   ctx.textAlign = "left"; // 设置为左对齐
-  const imgRect = { x: 0, y: 0, width: imgWidth, height: imgHeight };
+  // imgRect 应该对应图片在 canvas 上的实际绘制区域
+  const imgRect = { x: offsetX, y: offsetY, width: imgWidth, height: imgHeight };
 
   // 绘制底部黑色半透明遮罩
   const bottomRect = drawRectInRect(

src/views/old_mini/achievement_report/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="achievement-report-page">
         <custom-header name="生成成果报告"></custom-header>
-        <div class="report-content">
+        <div ref="reportDom" class="report-content">
             <div class="report-header">
                 <img class="header-book" src="@/assets/img/home/book.png" alt="">
                 <div class="time-tag">2025.12.15</div>
@@ -47,6 +47,8 @@
                 ></album-carousel> -->
             </div>
         </div>
+
+        <el-button class="download-btn" type="primary" @click="handleDownload">转发</el-button>
     </div>
 </template>
 
@@ -54,6 +56,9 @@
 import CustomHeader from "@/components/customHeader.vue";
 import AlbumCarousel from "@/components/album_compoents/albumCarousel";
 import { ref } from "vue";
+import html2canvas from "html2canvas";
+import { uploadBase64 } from "@/common/uploadImg";
+import { detectRuntimeEnvironment } from "@/common/commonFun";
 
 const reportBoxList = ref([
     {
@@ -81,9 +86,9 @@ const executeViewImage = ref([
   "baseMap": "https://birdseye-img.sysuimars.com/birdseye-look-mini/base_map/v2/111594.jpg",
   "blueZoneId": null,
   "district": "东莞市",
-//   "filename": "birdseye-look-mini/91429/1763371316207.jpg",
+  "filename": "birdseye-look-mini/91429/1763371316207.jpg",
 //   "filename": "birdseye-look-mini/91429/1763461501781.png",
-  "filename": "3f27e127-6497-4175-8efb-ba18d703852b/b1f6d99e-826d-4468-a6dd-83f9e7a12ea3/DJI_202512131000_001_b1f6d99e-826d-4468-a6dd-83f9e7a12ea3/DJI_20251213100724_0070_V_code-ws0fsmghvf91.jpeg",
+//   "filename": "3f27e127-6497-4175-8efb-ba18d703852b/b1f6d99e-826d-4468-a6dd-83f9e7a12ea3/DJI_202512131000_001_b1f6d99e-826d-4468-a6dd-83f9e7a12ea3/DJI_20251213100724_0070_V_code-ws0fsmghvf91.jpeg",
   "fosterCode": "LCGW-DGJH-GLY0253",
   "gardenId": null,
   "gardenName": "莞荔园",
@@ -119,6 +124,65 @@ const executeViewImage = ref([
 ]);
 
 const executeViewImage2 = ref(["birdseye-look-mini/91754/1763373487891.png"]);
+
+
+
+const isDowload = ref(true);
+const reportDom = ref(null);
+
+async function handleDownload() {
+    isDowload.value = false;
+    setTimeout(async () => {
+        // 获取要截图的DOM元素
+        const element = reportDom.value;
+
+        try {
+            const canvas = await html2canvas(element, {
+                scrollY: -window.scrollY, // 处理滚动条位置
+                allowTaint: true, // 允许跨域图片
+                useCORS: true, // 使用CORS
+                scale: 2, // 提高分辨率（2倍）
+                height: element.scrollHeight, // 设置完整高度
+                width: element.scrollWidth, // 设置完整宽度
+                logging: true, // 开启日志（调试用）
+            });
+
+            // 转换为图片并下载
+            const image = canvas.toDataURL("image/png");
+            const process = detectRuntimeEnvironment();
+            if (process === "wechat-webview") {
+                const imgUrl = await uploadBase64(image, false);
+                const params = {
+                    miniUserId: 766,
+                    key: "report",
+                };
+                // VE_API.garden.editPopSave({ ...params, text: imgUrl }).then((res) => {
+                //     if (res.success) {
+                //         wx.miniProgram.navigateTo({
+                //             url: `/pages/subPages/report_page/index`,
+                //         });
+                //     } else {
+                //         ElMessage.error("保存失败");
+                //     }
+                // });
+            } else {
+                downloadImage(image,'果园报告')
+            }
+            isDowload.value = true;
+        } catch (error) {
+            isDowload.value = true;
+        }
+    });
+}
+
+function downloadImage(dataUrl, filename) {
+    const link = document.createElement("a");
+    link.href = dataUrl;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
 </script>
 
 <style lang="scss" scoped>
@@ -239,5 +303,14 @@ const executeViewImage2 = ref(["birdseye-look-mini/91754/1763373487891.png"]);
             margin-top: 12px;
         }
     }
+    .download-btn {
+        position: fixed;
+        bottom: 20px;
+        left: 50%;
+        // background: #fff;
+        // box-shadow: 2px 2px 4.5px 0px #00000066;
+        // width: 100%;
+        transform: translateX(-50%);
+    }
 }
 </style>