图片、pdf文件实现添加水印之后传值给后台

实现之后的效果就是斜着灰色字体铺满全部图片或者pdf ,类似

图片上传之前添加水印并上传oss

    // 调用elementui 上传文件方法
    ossUpload(item) {
      const file = raw;
      const watermarkText = "heiheihei"; //水印文字
      const path = file.name;
      // 图片
      // 创建一个新的FileReader
      const reader = new FileReader();
      reader.onload = async (event) => {
        const dataURL = event.target.result;
        const watermarkedBlob = await this.addWatermarkToImage(
          dataURL,
          watermarkText
        );
        const ossResult = await item.client.multipartUpload(
          path,
          watermarkedBlob,
          {
            parallel: this.parallel,
            partSize: this.partSize,
            progress: async (p, checkpoint, res) => {
              await this.onUploadProgress(item, p, checkpoint, res, path);
            },
          }
        );
        if (ossResult.res.requestUrls[0].includes("?")) {
          this.ossResultfile_address =
            ossResult.res.requestUrls[0].split("?")[0];
        } else {
          this.ossResultfile_address = ossResult.res.requestUrls[0];
        }

        let aData = {
          folder_name: item.name,
          file_type: this.fileType,
          file_size: item.size,
          file_address: this.ossResultfile_address,
        };

        // 传值给后台
        this.onCreatePanFile(aData);
      };
      reader.readAsDataURL(file);
      return;
    },

    // 图片上传之前添加水印
    addWatermarkToImage(dataURL, text) {
      return new Promise((resolve) => {
        const image = new Image();
        image.crossOrigin = "Anonymous";
        image.src = dataURL;

        image.onload = () => {
          const canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;

          const context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, canvas.width, canvas.height);

          const patternCanvas = document.createElement("canvas");
          patternCanvas.width = 200;
          patternCanvas.height = 50;
          const patternContext = patternCanvas.getContext("2d");
          patternContext.font = "24px Arial";
          patternContext.fillStyle = "rgba(229, 229, 229, 0.5)";
          patternContext.fillText(text, 0, 40);

          const pattern = context.createPattern(patternCanvas, "repeat");
          context.fillStyle = pattern;
          context.fillRect(0, 0, canvas.width, canvas.height);

          canvas.toBlob((blob) => {
            resolve(blob);
          });
        };
      });
    },

pdf上传之前添加水印

// 调用elementui 上传文件方法
    ossUpload(item) {
      const reader = new FileReader();
      reader.onload = async (event) => {
        const arrayBuffer = event.target.result;
        const modifiedPdfBuffer = await this.generateWatermarkPDF(arrayBuffer);
        // 将修改后的PDF文件上传到服务器
        const modifiedPdfBlob = new Blob([modifiedPdfBuffer], {
          type: "application/pdf",
        });
        const formData = new FormData();
        formData.append("file", modifiedPdfBlob, "watermarked-" + path);
        const ossResult = await item.client.multipartUpload(
          path,
          modifiedPdfBlob,
          {
            parallel: this.parallel,
            partSize: this.partSize,
            progress: async (p, checkpoint, res) => {
              await this.onUploadProgress(item, p, checkpoint, res, path);
            },
          }
        );
        if (ossResult.res.requestUrls[0].includes("?")) {
          this.ossResultfile_address =
            ossResult.res.requestUrls[0].split("?")[0];
        } else {
          this.ossResultfile_address = ossResult.res.requestUrls[0];
        }
        let aData = {
          folder_name: item.name,
          file_type: this.fileType,
          file_size: item.size,
          file_address: this.ossResultfile_address,
        };
        // 传值给后台
        this.onCreatePanFile(aData);
      };
      reader.readAsArrayBuffer(file);
      return;
    },

    // pdf上传之前添加水印
    async generateWatermarkPDF(pdfBuffer) {
      const pdfDoc = await PDFDocument.load(pdfBuffer);
      const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
      const pages = pdfDoc.getPages();
      const watermarkText = "heiheihei"; //水印文字

      for (const page of pages) {
        const { width, height } = page.getSize();
        const textWidth = font.widthOfTextAtSize(watermarkText, 50);
        const textHeight = 50; // 设置水印文本的高度
        const xOffset = textWidth + 10; // X轴偏移量
        const yOffset = textHeight + 10; // Y轴偏移量

        for (let y = 0; y < height; y += yOffset) {
          for (let x = 0; x < width; x += xOffset) {
            const redValue = 229;
            const greenValue = 229;
            const blueValue = 229;

            const red = redValue / 255;
            const green = greenValue / 255;
            const blue = blueValue / 255;

            page.drawText(watermarkText, {
              x: x,
              y: height - y, // 将Y坐标调整为页面底部到顶部的距离
              font: font,
              size: 25,
              color: rgb(red, green, blue),
            });
          }
        }
      }
      const modifiedPdfBytes = await pdfDoc.save();
      return modifiedPdfBytes;
    },

图片、pdf预览添加水印，下一篇文章更新