agriculture-one-map/src/views/warningHome/components/album_compoents/albumDrawBox.vue

<template>
  <photo-consumer
      class="carousel-item"
      :src="watermark || base_img_url2 + photo.filename + resize"
  >
    <img v-if="Math.abs(current - index) < 3" crossorigin="anonymous" @load="drawWatermark($event,photo.markText)" loading="lazy" :src="watermark || (base_img_url2 + (photo.resFilename ? 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>
      <button class="close-button" @click="hideTagBox">✖</button>
    </div>
    <div class="tag-box right" :class="{'leftTop': 'leftTop'}">{{ index+1 }}/{{ length }}</div>
<!--    <div class="center-mark">mark</div>-->
  </photo-consumer>

</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, defineProps } from "vue";
import { base_img_url2 } from "@/api/config";
import {imageCache} from "./cacheImg.js"
import {dateFormat} from "@/utils/date_util.js"
const resize = "?x-oss-process=image/resize,p_80/format,webp/quality,q_40";

const canvasRef = ref(null);
const watermark = ref(null)

const props = defineProps({
  photo:{
    type: Object,
    required: true
  },
  index:{
    type: Number,
    required: true
  },
  length:{
    type: Number,
    required: true
  },
  current:{
    type: Number,
    required: true
  }
})

function drawWatermark(event, markText) {
  // console.log("markText:"+markText)
  if(!watermark.value && markText){
    let obj = JSON.parse(markText)
    const img = event.target;
    const canvas = canvasRef.value;
    let scale = 3
    canvas.width = img.width * scale;
    canvas.height = img.height * scale;
    const ctx = canvas.getContext('2d');
    ctx.scale(scale, scale)
    ctx.drawImage(img, 0, 0, img.width, img.height);
    drawBottom(ctx, img.width, img.height)
    watermark.value = canvas.toDataURL();
  }
}

let data = {year:props.photo.uploadDate.substring(0,4),
  monthDay:dateFormat(new Date(props.photo.uploadDate),'mm/dd'),
  address:props.photo.district.replaceAll("\"","") + props.photo.gardenName,
  tempImg:imageCache.get("temp"),temp:"20°C",
  feiniao:imageCache.get("feiniao"),
  fusheImg:imageCache.get("fushe"),fushe:"光照优",
  shiduImg:imageCache.get("shidu"),shidu:"湿度适宜",
  shotCode:props.photo.shotCode
}
// console.log(data)
const drawBottom = (ctx, imgWidth, imgHeight) => {
  // 设置遮罩的高度为imgHeight的1/6
  const maskHeight = imgHeight / 4;

  // 绘制黑色半透明遮罩
  ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; // 黑色，50%透明度
  ctx.fillRect(0, imgHeight - maskHeight, imgWidth, maskHeight);

  // 设置文本样式
  ctx.fillStyle = "white"; // 文本颜色为白色
  ctx.font = "8px Arial";
  ctx.textAlign = "left"; // 设置为左对齐

  // 从遮罩的底部开始绘制文本
  let currentY = imgHeight - maskHeight + 10; // 字段的起始Y坐标
  let currentX = 10; // 字段的起始X坐标

  // 绘制年份
  const field1 = `${data.year}`;
  ctx.fillText(field1, currentX, currentY+10);
  currentY += 5;
  // 计算下划线的起始和结束坐标
  const underlineY = currentY + 10; // 下划线Y坐标稍微低于文本
  const underlineWidth = ctx.measureText(field1).width; // 下划线的宽度与文本一致
  ctx.strokeStyle = "white"; // 下划线颜色为白色
  ctx.lineWidth = 1; // 下划线的宽度
  ctx.beginPath();
  ctx.moveTo(currentX, underlineY); // 下划线起始点
  ctx.lineTo(currentX + underlineWidth, underlineY); // 下划线结束点
  ctx.stroke(); // 绘制下划线

  // 绘制日期
  currentY += 20;
  currentX += -3
  ctx.fillStyle = "white"; // 文本颜色为白色
  ctx.font = "20px Arial";
  ctx.textAlign = "left"; // 设置为左对齐
  const field2 = `${data.monthDay}`;
  ctx.fillText(field2, currentX, currentY + 10);

  // 绘制一个圆点
  currentX += 60
  ctx.beginPath();
  ctx.arc(currentX, imgHeight - maskHeight + (maskHeight / 2 + 1), 2, 0, Math.PI * 2); // 绘制圆形
  ctx.fill(); // 填充圆形

  // 绘制地址
  currentY += -10;
  currentX += 10
  ctx.font = "8px Arial";
  const field3 = `${data.address}`;
  ctx.fillText(field3, currentX, currentY );

  // 绘制温度
  currentY += 8;
  currentX += -6
  ctx.drawImage(data.tempImg, currentX + 2, currentY + 1, 13, 13);
  const field4 = `${data.temp}`;
  currentX += 15
  currentY += 12
  ctx.fillText(field4, currentX, currentY);

  // 绘制湿度
  currentX += 20
  currentY += -12
  ctx.drawImage(data.shiduImg, currentX +2, currentY + 1, 13, 13);
  currentX += 16
  currentY += 12
  ctx.font = "8px Arial";
  const field5 = `${data.shidu}`;
  ctx.fillText(field5, currentX, currentY);

  // 绘制辐射
  currentX += 32
  currentY += -12
  ctx.drawImage(data.fusheImg, currentX + 2, currentY + 1, 13, 13);
  currentX += 16
  currentY += 12
  ctx.font = "8px Arial";
  const field6 = `${data.fushe}`;
  ctx.fillText(field6, currentX, currentY);

  // 绘制文本信息
  currentX =imgWidth - 40;
  currentY =imgHeight - 40;
  ctx.drawImage(data.feiniao, currentX, currentY, 25, 25);
  ctx.fillText(data.shotCode, currentX - 10, currentY + 35);
}

//绘制文字
const drawText = (ctx, textObject) => {
  const { x, y, text, color } = textObject;
  ctx.fillStyle = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
  ctx.font = 'normal 12px sans-serif';
  const textHeight = parseInt(ctx.font, 10); // 获取字体大小计算文本的实际高度
  ctx.fillText(text, x, y + textHeight); // 将y调整为y + textHeight  // 在指定位置（左上角）绘制文本
};

const showTagBox = ref(true); // 控制 tag-box 的显示状态
const hideTagBox = (event) => {
  event.stopPropagation();
  showTagBox.value = false; // 隐藏 tag-box
};


</script>

<style lang="scss" scoped>
.canvas-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.carousel-item {
  min-width: 100%;
  flex-shrink: 0;
  width: 100%;
  pointer-events: auto;
  position: relative;
  .tag-box {
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translate(-50%, 50%); // 确保在高二分之一的位置水平居中
    height: 18px;
    padding: 0 6px;
    background: rgba(108, 108, 108, 0.67);
    border-radius: 10px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    font-size: 12px;

    &.right {
      left: auto;
      right: 10px;
    }
    &.leftTop {
      height: 25px;
      line-height: 26px;
      padding: 0 8px;
      border-radius: 16px;
      background: rgba(0, 0, 0, 0.6);
      bottom: auto;
      top: 6px;
    }
  }
  .tag-text {
    position: absolute;
    bottom: 31%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, 50%); // 确保在高二分之一的位置水平居中
    height: 24px;
    padding: 10px 0px 10px 0px;
    background: rgba(0, 0, 0, 0.67);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFFFFF;
    font-size: 12px;
  }

  .center-mark {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #36402c;
    font-size: rpx(24);
    font-weight: bold;
    padding: rpx(14) rpx(30);
    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.6) 24%,
            rgba(255, 255, 255, 0.6) 76%,
            rgba(255, 255, 255, 0) 100%
    );
  }
}
.carousel-item img {
  width: 100%;
  display: block;
}
canvas {
  position: absolute;
}
.close-button {
  background: transparent;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 10px; // 可以根据需求调整大小
  position: absolute;
  top: -1px;
  right: -9px; // 调整为合适的间距
  transform: translateY(-50%);
}


</style>