JS使用html2canvas将html元素转换为图片并添加水印

路人贾！

于 2024-06-13 18:29:48 发布

阅读量253

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_71125105/article/details/139525823

版权

JS使用html2canvas将html元素转换为图片并添加水印

引入html2canvas 库
完整代码

引入html2canvas 库

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

完整代码

使用html2canvas 库来将 div 转换为图片，在获取到 canvas 后，我们获取了 2D 绘图上下文（ctx），然后使用 ctx.fillText() 方法在图片上添加了文本水印

<!DOCTYPE html>
<html>
  <head>
    <title>Div转换为图片</title>
    <script>
      function convertToImage() {
        // 获取要转换为图片的 div 元素
        var div = document.getElementById("content");

        // 创建一个新的 Canvas 元素
        var canvas = document.createElement("canvas");
        canvas.width = div.offsetWidth;
        canvas.height = div.offsetHeight;

        // 获取 Canvas 的 2D 上下文
        var ctx = canvas.getContext("2d");

        // 将 div 的内容绘制到 Canvas 上
        html2canvas(div, { allowTaint: true }).then(function (canvas) {
          // 创建一个新的Canvas元素用于添加水印
          var watermarkCanvas = document.createElement("canvas");
          var watermarkCtx = watermarkCanvas.getContext("2d");

          // 设置新Canvas的宽高和原始Canvas一致
          watermarkCanvas.width = canvas.width;
          watermarkCanvas.height = canvas.height;

          // 将原始图像绘制到新Canvas上
          watermarkCtx.drawImage(canvas, 0, 0);

          // 水印文本样式
          watermarkCtx.font = "16px Arial"; //水印字体大小
          watermarkCtx.fillStyle = "red"; //水印颜色
          watermarkCtx.textAlign = "left";
          let obj = {
            name: "张三",
            age: 18,
          };
          // 多行水印文本
          var lines = [`姓名:${obj.name}`,`年龄:${obj.age}`];
          var lineHeight = 24; // 行高
          var leftMargin =10; // 左侧边距
          var bottomMargin = 10; // 底部边距
          // 从底部开始绘制水印文本
          lines.reverse().forEach(function (line, index) {
            var yPosition =
              watermarkCanvas.height - bottomMargin - index * lineHeight;
            watermarkCtx.fillText(line, leftMargin, yPosition);
          });

          // 将新Canvas转换为图像并显示在页面上
          var watermarkImg = new Image();
          watermarkImg.src = watermarkCanvas.toDataURL("image/png");
          document.body.appendChild(watermarkImg);
        });
      }
    </script>
    // 引入html2canvas 库
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
  </head>
  <body>
    <div id="content">
      <!-- 这里是要转换为图片的 div 内容 -->
      <h1>Hello, World!</h1>
      <p>This is a div element.</p>
    </div>
    <button onclick="convertToImage()">转换为图片</button>
  </body>
</html>