图片、pdf链接url 预览时候加水印

pdf 点击事件openpdfInNewTab传值url

 import { modifyPdf } from "./fileOperation"; // fileOperation 
 openpdfInNewTab(imageUrl) {
        if (imageUrl.file_address.includes("?")) {
            var parts = imageUrl.file_address.split("?");
            var pdfUrl = parts[0];
            modifyPdf(imageUrl.folder_name, pdfUrl);
        } else {
            const pdfUrl = imageUrl.file_address;
            modifyPdf(imageUrl.folder_name, pdfUrl);
        }

    },

fileOperation.js

fileOperation.js

// 添加pdf水印
export async function modifyPdf(title, url) {
    const existingPdfBytes = await fetch(url).then((res) =>
        res.arrayBuffer()
    );
    const pdfDoc = await PDFDocument.load(existingPdfBytes);

    const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica); // 只支持英文

    const pages = pdfDoc.getPages();
    // 线上打开
    const a = Cookies.get("nameUser");
    // const a = "999"
    for (let i = 0; i < pages.length; i++) {
        const page = pages[i];
        // width
        const { height } = page.getSize();
        for (let i = 0; i < 6; i++) {
            for (let j = 0; j < 6; j++) {
                page.drawText(a, {
                    x: j * 100,
                    y: height / 5 + i * 250,
                    size: 30,
                    font: helveticaFont,
                    // font: customFont, // 自定义字体
                    color: rgb(0.01, 0.1, 0.1),
                    opacity: 0.2,
                    rotate: degrees(35),
                });
            }
        }
    }

    // 序列化为字节
    const pdfBytes = await pdfDoc.save();
    // 预览
    preView11(title, pdfBytes);
}
// 在浏览器新的标签页预览PDF
function preView11(docTitle, stream) {
    const URL = window.URL || window.webkitURL;
    const href = URL.createObjectURL(
        new Blob([stream], { type: "application/pdf;charset=utf-8" })
    );
    window.open(href + "#toolbar=0");
}

图片预览 openImageViewerNo点击事件传值url

<template>
    <div>
         <!-- 图片放大展示 -->
      <ImageViewer
        :imageUrl="currentImage"
        v-if="isImageViewerOpen"
        @close="closeImageViewer"
      />



    </div>
</template>  
import ImageViewer from "./ImageViewer.vue";

data(){
    return{
      isImageViewerOpen: false, 
      currentImage: "",
    }

}
methods:{
  
   // 点击列表及图标--图片放大显示  不带水印
    openImageViewerNo(imageUrl) {
      if (imageUrl.file_address.includes("?")) {
        var parts = imageUrl.file_address.split("?");
        // 取第一个元素，即问号之前的部分
        var beforeQuestionMark = parts[0];
        // 输出结果
        this.currentImageNo = beforeQuestionMark;
        this.isImageViewerOpenNo = true;
      } else {
        var beforeQuestionMark = imageUrl.file_address;
        // 输出结果
        this.currentImageNo = beforeQuestionMark;
        this.isImageViewerOpenNo = true;
      }
      this.getPrevew(imageUrl);
    },
    // 点击列表及图标--图片关闭
    closeImageViewer() { 
      this.isImageViewerOpen = false;
      this.currentImage = "";
    },
}

创建一个子组件，调用子组件实现加水印预览url

ImageViewer.vue

<template>
  <div class="image-viewer">
    <div class="overlay" @click="closeViewer"></div>
    <div class="image-container">
      <img :src="watermarkedImageUrl" alt="Image" @click="closeViewer" />
      <div class="watermark">{{ watermarkText }}</div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  props: {
    imageUrl: String,
  },
  data() {
    return {
      watermarkedImageUrl: null,
    };
  },
  mounted() {
    this.addWatermarkToImage(this.imageUrl);
    // console.log(this.imageUrl,"00000");
  },
  methods: {
    closeViewer() {
      this.$emit("close");
    },
    async addWatermarkToImage(imageUrl) {
      const image = new Image();
      // 线上打开
      const a = Cookies.get("nameUser") //预览不需要加水印 让变量 a等于空即可
      image.crossOrigin = "Anonymous"; // 允许跨域图片
      image.onload = async () => {
        const canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0, image.width, image.height);

        // Define watermark properties
        const watermarkText = a;
        const fontSize = 30;
        const spacingX = 85; // Horizontal spacing between watermarks
        const spacingY = 85; // Vertical spacing between watermarks

        ctx.font = `${fontSize}px Arial`;
        ctx.fillStyle = "rgba(30, 33, 42, 0.5)";

        // Calculate the diagonal length of the watermark text
        const textWidth = ctx.measureText(watermarkText).width;
        const textHeight = fontSize;
        const diagonalLength = Math.sqrt(
          textWidth * textWidth + textHeight * textHeight
        );

        // Calculate the number of repetitions both horizontally and vertically
        const repeatX = Math.ceil(
          (image.width + diagonalLength) / (textWidth + spacingX)
        );
        const repeatY = Math.ceil(
          (image.height + diagonalLength) / (fontSize + spacingY)
        );

        // Tile the watermark across the canvas
        for (let i = 0; i < repeatY; i++) {
          for (let j = 0; j < repeatX; j++) {
            const offsetX = j * (textWidth + spacingX);
            const offsetY = i * (fontSize + spacingY);
            ctx.save(); // Save the current transformation matrix
            ctx.translate(offsetX, offsetY); // Translate to the top-left corner of the current watermark
            ctx.rotate(-Math.PI / 4); // Rotate by -45 degrees
            ctx.fillText(watermarkText, 0, 0); // Draw the text at the rotated position
            ctx.restore(); // Restore the transformation matrix
          }
        }

        // Convert canvas to image URL
        this.watermarkedImageUrl = canvas.toDataURL();
      };
      image.src = imageUrl;
    },
  },
};
</script>

<style scoped>
.image-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  overflow-y: auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.image-container {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  z-index: 9999;
  overflow-y: auto;
  display: inline-block; /* Ensures the container wraps around the image */
}

img {
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
}

.watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Cover the entire width of the image */
  height: 100%; /* Cover the entire height of the image */
  color: rgba(121, 116, 116, 0.5); /* Adjust color and opacity as needed */
  font-size: 24px; /* Adjust font size as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Ensure watermark doesn't interfere with clicks */
  z-index: 1001; /* Ensure watermark is above the image */
}
</style>

 pdf、图片下载时候加水印，下一篇