使用html2canvas.js实现页面截图并显示或上传的示例代码

使用html2canvas.js实现页面截图是一种常见的需求。本攻略将为您提供一份完整的使用html2canvas.js实现页面截图并显示或上传的示例代码。

环境准备

在开始之前，请确保您已经安装了如下依赖：

html2canvas.js：用于截图
jQuery：用于简化DOM操作和事件绑定

以下是示例中将用到的HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用html2canvas.js实现页面截图并显示或上传的示例代码</title>
</head>
<body>
  <div id="content">
    <h1>这是一个示例页面</h1>
    <p>这里是一段文本内容</p>
    <img src="./example.jpg" alt="示例图片">
  </div>

  <button id="save-btn">保存为图片</button>

  <script src="./jquery.min.js"></script>
  <script src="./html2canvas.js"></script>
  <script src="./index.js"></script>
</body>
</html>

实现截图并保存为图片

为了实现截图并保存，我们需要用到html2canvas.js中的核心函数html2canvas()。以下是实现截图并保存为图片的代码：

$('#save-btn').on('click', function() {
  // 获取要截图的容器
  var content = document.querySelector('#content');

  // 使用html2canvas.js截图
  html2canvas(content).then(function(canvas) {
    // 将canvas转化为图片
    var img = canvas.toDataURL('image/png');

    // 创建a标签并设置下载属性
    var link = document.createElement('a');
    link.download = 'example.png';
    link.href = img;

    // 将a标签添加至页面并模拟点击
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
});

我们可以通过选择器或原生querySelector()方法获取需要截图的容器，然后使用html2canvas()函数将其转化为Canvas，并用toDataURL()方法将Canvas转化为图片URL。接着，我们可以创建一个<a>标签并将图片URL赋值给它的 href属性。最后，我们将这个标签添加到页面上并模拟点击，就可以让用户下载这个截图啦！

实现截图并上传

与将截图保存为本地图片不同的是，我们可以将截图上传到服务器。要实现这个功能，我们需要使用XMLHttpRequest对象发送异步请求，将截图数据提交到服务器。以下是实现截图并上传的代码：

$('#save-btn').on('click', function() {
  // 获取要截图的容器
  var content = document.querySelector('#content');

  // 使用html2canvas.js截图
  html2canvas(content).then(function(canvas) {
    // 将canvas转化为图片
    var img = canvas.toDataURL('image/png');

    // 构建表单数据，将图片数据添加到表单中
    var formData = new FormData();
    formData.append('image', img);

    // 创建XMLHttpRequest对象并发送异步请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');
    xhr.send(formData);

    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          alert('上传成功');
        } else {
          alert('上传失败');
        }
      }
    };
  });
});

首先，我们还是要用html2canvas()函数将容器转化为Canvas，然后用toDataURL()方法转化为图片URL。接着我们需要创建FormData对象，该对象可用于将数据添加到表单里。我们将图片URL添加到这个表单中，并创建XMLHttpRequest对象并发送异步请求。在onreadystatechange事件中检查异步请求完成后的响应结果，如果状态码为200，提示用户上传成功，否则，提示用户上传失败。