feiniao-farm-h5/src/components/album_compoents/albumDrawBox.vue

<template>
  <photo-consumer
      class="carousel-item"
      :src="watermark || getPhotoSrc(photo)"
  >
    <img
      v-if="Math.abs(current - index) < 3"
      crossorigin="anonymous"
      loading="lazy"
      @load="drawWatermark($event)"
      :src="watermark || getPhotoSrc(photo)"
      style="width: 100%; height: 255px; object-fit: cover; display: block; border-radius: 8px;"
    />
    <canvas
      ref="canvasRef"
      style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;border-radius: 8px;"
    ></canvas>
    <div class="tag-box right" v-if="isShowNum" :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,loadImage} from "./cacheImg.js"
import {dateFormat} from "@/utils/date_util.js"

import {drawTextInRect, drawBorderImageInRect, drawImageInRect, drawRectInRect, drawHorizontalTextList} from "./utils"
// const resize = "?x-oss-process=image/resize,p_30/format,webp/quality,q_40";
const resize = "";

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

const props = defineProps({
  photo:{
    required: true
  },
  index:{
    type: Number,
    required: true
  },
  length:{
    type: Number,
    required: true
  },
  current:{
    type: Number,
    required: true
  },
  isShowNum:{
    type: Number,
    required: true
  }
})
let img = null;
let ctx = null;

function getWatermarkKey(photo) {
  return photo?.resFilename || photo?.cloudFilename || photo
}

function getPhotoSrc(photo) {
  const key = photo?.resFilename || photo?.cloudFilename || photo
  if (typeof key === 'string' && (key.startsWith('http') || key.startsWith('data:'))) {
    return key + resize
  }
  return base_img_url2 + key + resize
}


async function drawWatermark(event) {
  const displayImg = event.target

  const key = getWatermarkKey(props.photo)
  if (watermarkCache.has(key)) {
    watermark.value = watermarkCache.get(key)
    return
  }

  // ✅ 用原始图片重新创建一个 Image
  const sourceImg = await loadOriginalImage(displayImg.src)

  drawWatermark2(sourceImg, displayImg)

  watermarkCache.set(key, watermark.value)
}

const watermarkCache = new Map()


function loadOriginalImage(src) {
  return new Promise((resolve) => {
    const img = new Image()
    img.crossOrigin = 'anonymous'
    img.onload = () => resolve(img)
    img.src = src
  })
}

function drawWatermark2(sourceImg, displayImg) {
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')

  const rect = displayImg.getBoundingClientRect()
  const w = rect.width
  const h = rect.height

  const dpr = window.devicePixelRatio || 1

  canvas.width = w * dpr
  canvas.height = h * dpr
  canvas.style.width = w + 'px'
  canvas.style.height = h + 'px'

  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
  ctx.imageSmoothingEnabled = true
  ctx.imageSmoothingQuality = 'high'

  ctx.clearRect(0, 0, w, h)

  // ✅ 用「原始像素图」做 cover
  drawImageCoverByNatural(ctx, sourceImg, w, h)

  drawBottomMask(ctx, w, h)
  drawBottomTextOverlay(ctx, w, h)

  watermark.value = canvas.toDataURL('image/jpeg', 0.85)
}
function drawImageCoverByNatural(ctx, img, w, h) {
  const imgRatio = img.naturalWidth / img.naturalHeight
  const canvasRatio = w / h

  let sx, sy, sw, sh

  if (imgRatio > canvasRatio) {
    sh = img.naturalHeight
    sw = sh * canvasRatio
    sx = (img.naturalWidth - sw) / 2
    sy = 0
  } else {
    sw = img.naturalWidth
    sh = sw / canvasRatio
    sx = 0
    sy = (img.naturalHeight - sh) / 2
  }

  ctx.drawImage(img, sx, sy, sw, sh, 0, 0, w, h)
}

function drawImageCover(ctx, img, w, h) {
  const imgRatio = img.naturalWidth / img.naturalHeight
  const canvasRatio = w / h

  let sx, sy, sw, sh

  if (imgRatio > canvasRatio) {
    sh = img.naturalHeight
    sw = sh * canvasRatio
    sx = (img.naturalWidth - sw) / 2
    sy = 0
  } else {
    sw = img.naturalWidth
    sh = sw / canvasRatio
    sx = 0
    sy = (img.naturalHeight - sh) / 2
  }

  ctx.drawImage(img, sx, sy, sw, sh, 0, 0, w, h)
}
function drawBottomTextOverlay(ctx, w, h) {
  const paddingX = 12
  const paddingBottom = 8
  const lineHeight = 16

  ctx.textBaseline = 'alphabetic'
  ctx.fillStyle = '#fff'
  ctx.shadowColor = 'rgba(0,0,0,0.6)'
  ctx.shadowBlur = 2

  // ⬇️ 从底部开始，一行一行往上
  let y = h - paddingBottom

  // 第三行（最底）
  ctx.font = '10px sans-serif'
  console.log('paddingX', paddingX, y)
  ctx.drawImage(imageCache.get("address"), paddingX, y - 9, 9, 10);
  ctx.fillText(
    '荔博园（广东省广州市从化区）',
    paddingX + 12,
    y
  )

  // 第二行
  y -= 15
  ctx.font = '16px PangMenZhengDao'
  const workNameText = '梢期杀虫'
  const prescriptionText = '药物处方：乙烯利'
  ctx.fillText(
    workNameText,
    paddingX,
    y
  )
  ctx.font = '10px sans-serif'
  ctx.fillText(
    prescriptionText,
    paddingX + workNameText.length * 20,
    y
  )

  // 第一行（最上）
  y -= 17
  ctx.font = '12px PangMenZhengDao'
  const timeText = '2025.12.25'
  ctx.fillText(timeText, paddingX, y)
  const executorText = '执行人：张三李四'
  ctx.font = '10px sans-serif'
  ctx.fillText(executorText, paddingX + 80, y)

  ctx.shadowBlur = 0
}


function drawBottomMask(ctx, w, h) {
  const maskHeight = 60  // 和 3 行文字 + padding 精确匹配

  ctx.fillStyle = 'rgba(0,0,0,0.45)'
  ctx.fillRect(
    0,
    h - maskHeight, // ✅ 绝对贴底
    w,
    maskHeight
  )
}




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

const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, '0');
  return `${(year+"").substring(2)}${month}${day}`;
};




</script>

<style lang="scss" scoped>
.canvas-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.carousel-item {
  min-width: 100%;
  max-height: 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%);
}

.floating-img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: auto !important;
  height: 25% !important;
}
.floating-img-big {
  position: fixed !important;
  z-index: 99999 !important;
  top: 50% !important;
  left: 50% !important;
  width: auto !important;
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
}




</style>