使用pdf-lib.js实现pdf添加自定义水印功能

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>PDF Watermark Example</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script> 
</head>

<body>
  <input type="file" id="pdfFile" accept="application/pdf">
  <button onclick="addWatermark()">添加水印</button>
  <a id="downloadLink" style="display:none;">下载PDF</a>

  <script>
    async function addWatermark() {
      const fileInput = document.getElementById('pdfFile');
      const file = fileInput.files[0];

      if (!file) {
        alert('请选择一个PDF文件');
        return;
      }

      const arrayBuffer = await file.arrayBuffer();
      const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);
      const pages = pdfDoc.getPages();
      // 获取当前时间并格式化
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hour = String(now.getHours()).padStart(2, '0');
      const minute = String(now.getMinutes()).padStart(2, '0');

      // 创建水印
      const watermarkText = `无敌暴龙兽-${year}-${month}-${day}-${hour}:${minute}-加密`;
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const fontSize = 20;
      const textColor = 'rgba(0, 0, 0, 0.2)';

      // 计算文本宽度和高度
      ctx.font = `${fontSize}px Arial`;
      const textMetrics = ctx.measureText(watermarkText);
      const textWidth = textMetrics.width;
      const textHeight = fontSize;

      // 计算旋转后的文本边界
      const angle = -Math.PI / 4; // 旋转45度
      const rotatedWidth = Math.abs(textWidth * Math.cos(angle)) + Math.abs(textHeight * Math.sin(angle));
      const rotatedHeight = Math.abs(textHeight * Math.cos(angle)) + Math.abs(textWidth * Math.sin(angle));

      // 设置Canvas大小
      canvas.width = rotatedWidth + 20; // 增加一些边距
      canvas.height = rotatedHeight + 20;

      // 绘制水印文本
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.rotate(angle);
      ctx.font = `${fontSize}px Arial`;
      ctx.fillStyle = textColor;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(watermarkText, 0, 0);

      // 将Canvas转换为Image对象
      const image = new Image();
      image.src = canvas.toDataURL('image/png');

      // 添加水印到每一页PDF
      for (const page of pages) {
        const { width, height } = page.getSize();

        // 计算新的水印尺寸,以便它可以跨越页面的两个相邻边缘
        const cornerMargin = 50; // 角落与页面边缘之间的最小距离
        const cornerSizeMultiplier = 0.5; // 控制水印相对于页面尺寸的比例
        const scale = 1; // 水印缩放比例

        const cornerWidth = Math.min(width, height) * cornerSizeMultiplier * scale;
        const cornerHeight = cornerWidth; // 假设是正方形水印

        // 计算水印的新位置,使其跨越页面的两个相邻边缘
        const positions = [
          { x: cornerMargin, y: cornerMargin }, // 左上角
          { x: width - cornerWidth - cornerMargin, y: cornerMargin }, // 右上角
          { x: cornerMargin, y: height - cornerHeight - cornerMargin }, // 左下角
          { x: width - cornerWidth - cornerMargin, y: height - cornerHeight - cornerMargin } // 右下角
        ];

        // 需要重新创建水印图像以匹配新尺寸
        const newCanvas = document.createElement('canvas');
        const newCtx = newCanvas.getContext('2d');
        newCanvas.width = cornerWidth;
        newCanvas.height = cornerHeight;

        // 复制旧水印到新画布
        newCtx.drawImage(canvas, 0, 0, cornerWidth, cornerHeight);

        // 将新画布转换回Image对象
        const newImage = new Image();
        newImage.src = newCanvas.toDataURL('image/png');

        // 嵌入新水印到PDF文档
        const newImg = await pdfDoc.embedPng(newImage.src);

        for (const pos of positions) {
          page.drawImage(newImg, {
            x: pos.x,
            y: pos.y,
            width: newImg.width,
            height: newImg.height,
          });
        }
      }

      // 保存修改后的PDF
      const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
      const downloadLink = document.getElementById('downloadLink');
      downloadLink.href = pdfDataUri;
      downloadLink.download = 'watermarked.pdf';
      downloadLink.click();
    }
  </script>
</body>

</html>
相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架