页面调整

src/views/home/album_compoents/albumCarousel.vue

@@ -7,7 +7,7 @@
       :show-close="false"
       append-to-body
   >
-    <album-carousel-item v-if="images" :farmId="farmId" :images="images" :lock="lock"></album-carousel-item>
+    <album-carousel-item :key="nameRef" :name="nameRef" v-if="images" :farmId="farmId" :images="images" :lock="lock"></album-carousel-item>
   </el-dialog>
 </template>
 
@@ -20,6 +20,7 @@ import eventBus from "@/api/eventBus";
 
 const lock = ref(false);
 const farmId = ref(766);
+const nameRef = ref("");
 
 const images = ref(null);
 const dialogVisible = ref(false)
@@ -33,6 +34,10 @@ startDate.setMonth(currentDate.getMonth() - 1);
 const formattedStartDate = dateFormat(startDate, 'YY-mm-dd');
 const formattedEndDate = dateFormat(currentDate, 'YY-mm-dd');
 
+eventBus.on("change:watermark",function(name){
+  nameRef.value = name
+})
+
 eventBus.on("click:point",function({farmId,sampleId}){
   let params = {sampleId,farmId}
   VE_API.miniimage.list(params).then(res => {

src/views/home/album_compoents/albumCarouselItem.vue

@@ -5,7 +5,7 @@
       <photo-provider v-if="images" :photo-closable="true" @visibleChange="handleVisibleChange">
         <template  v-for="(photo, index) in images"
                    :key="photo.id">
-          <album-draw-box  :farmId="farmId" :photo="photo" :current="currentIndex" :index="index" :length="images.length"
+          <album-draw-box  :farmId="farmId" :photo="photo" :name="name" :current="currentIndex" :index="index" :length="images.length"
           ></album-draw-box>
         </template>
       </photo-provider>
@@ -48,6 +48,10 @@ const props =defineProps({
   lock:{
     type: Boolean,
     default: true
+  },
+  name:{
+    type: String,
+    default: ""
   }
 })
 const {images} = toRefs(props);

src/views/home/album_compoents/albumDrawBox.vue

@@ -1,9 +1,9 @@
 <template>
   <photo-consumer
       class="carousel-item"
-      :src="watermark || base_img_url2 + (photo.resFilename ? photo.resFilename : photo.filename) + resize"
+      :src="watermark || base_img_url2 + (photo.resFilename && !name ? photo.resFilename : photo.filename) + resize"
   >
-    <img v-if="Math.abs(current - index) < 3" crossorigin="anonymous" @load="drawWatermark($event)" loading="lazy" :src="watermark || (base_img_url2 + (photo.resFilename ? photo.resFilename : photo.filename) + resize)" style="width: 100%;" />
+    <img v-if="Math.abs(current - index) < 3" crossorigin="anonymous" @load="drawWatermark($event, name)" loading="lazy" :src="watermark || (base_img_url2 + (photo.resFilename && !name ? photo.resFilename : photo.filename) + resize)" style="width: 100%;" />
     <canvas  ref="canvasRef" style="position: absolute;"></canvas>
     <div class="tag-text" v-if="showTagBox" >
       <span v-html="photo.growText"></span>
@@ -21,9 +21,8 @@ import { base_img_url2 } from "@/api/config";
 import {imageCache,loadImage} from "./cacheImg.js"
 import {dateFormat} from "@/utils/date_util.js"
 import {pointToFormat} from "@/utils/util.js"
-import {drawTextInRect, drawBorderImageInRect, drawImageInRect, drawRectInRect, drawHorizontalTextList} from "./utils"
+import {drawTextInRect, drawBorderImageInRect, drawImageInRect, drawRectInRect, drawHorizontalTextList, drawTargetRectangles} from "./utils"
 const resize = "?x-oss-process=image/resize,p_120/format,webp/quality,q_100";
-
 const canvasRef = ref(null);
 const watermark = ref(null)
 const baseMapBig = ref(false)
@@ -48,6 +47,10 @@ const props = defineProps({
   current:{
     type: Number,
     required: true
+  },
+  name:{
+    type: String,
+    default: ""
   }
 })
 let img = null;
@@ -67,7 +70,28 @@ let data = {year:props.photo.uploadDate.substring(0,4),
   uploadDate:props.photo.uploadDate,
 }
 
-async function drawWatermark(event) {
+async function drawWatermark(event,name) {
+  console.log(name)
+  if(!name){
+    drawWatermark1(event)
+  }else{
+    drawTargetRectangles2(event.target,props.photo.watermarks.find(item=>item.name === name))
+  }
+}
+
+function drawTargetRectangles2(img, obj) {
+  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);
+  drawTargetRectangles(ctx, obj, 4000,3000,img.width, img.height)
+  watermark.value = canvas.toDataURL();
+}
+
+async function drawWatermark1(event) {
   img = event.target
   await loadImage(props.photo.baseMap,"base_map_"+props.photo.treeId)
   data.baseMap = imageCache.get("base_map_"+props.photo.treeId)
@@ -85,6 +109,7 @@ async function drawWatermark(event) {
   }
 }
 
+
 function drawWatermark2(img,weather) {
   const canvas = canvasRef.value;
   let scale = 3

src/views/home/album_compoents/utils.js

@@ -248,9 +248,37 @@ const drawHorizontalTextList = (ctx, rect,color='white', texts, fontSizePercent,
 };
 
 
+function drawTargetRectangles(ctx, obj, originalWidth, originalHeight, imgWidth, imgHeight) {
+    // 计算缩放比例
+    const scaleX = imgWidth / originalWidth;
+    const scaleY = imgHeight / originalHeight; // 假设实际宽度和高度缩放比例相同，如果需要不同，请传入actualHeight并计算scaleY
+    let targetRectangles = obj.cor;
+    let color = obj.color;
+    // 遍历每个目标框
+    targetRectangles.forEach(rect => {
+        // 解构出坐标
+        const [x1, y1, x2, y2] = rect;
+
+        // 计算缩放后的新坐标
+        const newX1 = x1 * scaleX;
+        const newY1 = y1 * scaleY;
+        const newX2 = x2 * scaleX;
+        const newY2 = y2 * scaleY;
+
+        // 绘制矩形框
+        ctx.strokeStyle = `rgb(${color[0]}, ${color[1]}, ${color[2]})`; // 使用你提供的颜色
+        ctx.lineWidth = 2; // 线条宽度可以根据需要调整
+        ctx.strokeRect(newX1, newY1, newX2 - newX1, newY2 - newY1);
+    });
+}
+
+
+
+
+
 
 
 
 
-export { drawTextInRect, drawLineInRect, drawPointInRect ,drawImageInRect,drawBorderImageInRect, drawRectInRect, drawHorizontalTextList};
+export { drawTextInRect, drawLineInRect, drawPointInRect ,drawImageInRect,drawBorderImageInRect, drawRectInRect, drawHorizontalTextList, drawTargetRectangles};