【日常记录】【插件】使用 html2canvas增加水印

最新推荐文章于 2024-07-25 09:24:40 发布

嘤嘤怪呆呆狗

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量1.2k

点赞数 13

分类专栏：日常记录文章标签： vue 前端 js

本文链接：https://blog.csdn.net/qq_45634593/article/details/136852096

版权

日常记录专栏收录该内容

46 篇文章 0 订阅

订阅专栏

文章目录

1、需求

实际开发中，经常需要将网页元素转换为图片，以便进行保存、分享或打印等用途。,一般想到的方案就是canvas

在这里插入图片描述

比如这个,需要把这个DOM转化成一个图片

2、html2canvas

html2canvas 可以把DOM结构转化成一个canvas标签

使用方法

// npm 下载插件
npm install html2canvas
// 项目引入插件
import html2canvas from 'html2canvas';

这个方法有两个参数,一个是目标元素,一个是配置项

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

3、实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .box {
      position: relative;
      width: 400px;
      height: 300px;
    }

    .watermark {
      position: absolute;
      left: 10px;
      bottom: 10px;
      padding: 10px;
      color: #fff;
      background-color: rgba(0, 0, 0, .6);
      border-radius: 10px;
    }
  </style>
</head>

<body>

  <div class="box">
    <img src="./images/img4.jpg" alt="" width="400px">
    <div class="watermark">
      <div>名称:呆呆狗</div>
      <div>时间:2024-03-19</div>

    </div>
  </div>
  <button>生成图片</button>
  <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>
  <script>
    let btnEl = document.querySelector('button');
    btnEl.addEventListener('click', function () {
      html2canvas(document.querySelector('.box'), {
        scale: window.devicePixelRatio * 2
      }).then(canvas => {
        // 这里返回的是一个 canvas 标签
        // document.body.appendChild(canvas);
        const base64Data = canvas.toDataURL('image/jpeg')
        var link = document.createElement('a');
        link.href = base64Data;
        link.style.display = 'none';
        link.download = '有水印的.jpeg';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

      })
    })
  </script>
</body>

</html>