html2canvas生成海报

简介

html2canvas是一个强大的JavaScript库，它能够在用户浏览器上直接截取网页或其部分内容，生成“屏幕截图”。与传统的屏幕截图方法不同，html2canvas基于DOM构建截图，通过收集页面元素的信息来生成截图。虽然这种方法可能无法100%准确地反映页面的实际情况，但它能够提供一种快速、便捷的方式来获取页面的可视化表示。

功能特点

• 截取网页或其部分内容：html2canvas能够灵活地截取整个网页或指定的DOM元素，满足不同的截图需求。
• 基于DOM构建截图：html2canvas通过分析页面上的DOM元素信息来构建截图，这使得它可以在各种设备和分辨率下生成一致的截图。
• 跨域支持：通过设置useCORS选项，html2canvas可以截取包含跨域资源的页面，为跨域应用提供了方便。
• 高度可配置：html2canvas提供了丰富的配置选项，可以控制截图的尺寸、滚动位置等，满足各种定制化的需求。

示例代码

以下是一个使用html2canvas生成海报的示例代码：

// 引入html2canvas库
import html2canvas from 'html2canvas';

// 定义一个异步函数handleCapture
const handleCapture = async () => {
  // 获取要截图的元素，通过capture.value这个DOM元素的值获取
  const el = document.getElementById('capture');

  // 获取设备的像素比例，用于适应不同屏幕分辨率
  const scale = window.devicePixelRatio;

  // 配置选项对象，用于html2canvas的截图设置
  const config = {
    scale: scale, // 使用设备像素比例
    useCORS: true, // 启用跨域支持，允许截图跨域资源
    width: el.offsetWidth, // 设置截图的宽度为元素的宽度
    height: el.offsetHeight, // 设置截图的高度为元素的高度
    scrollX: 0, // 水平滚动的初始位置
    scrollY: 0, // 垂直滚动的初始位置
    x: 0, // 截图区域的左上角x坐标
    y: 0, // 截图区域的左上角y坐标
  };

  // 使用html2canvas截图，并等待截图完成
  const canvas = await html2canvas(el, config);

  // 将截图生成的Canvas元素添加到页面的DOM中
  document.body.appendChild(canvas);

  // 将Canvas转换成图片数据（Base64编码）
  const imgData = canvas.toDataURL('image/png', 1);

  // 将图片数据赋值给名为captureImage的元素的value属性
  document.getElementById('captureImage').value = imgData;
};

上述代码演示了如何使用html2canvas库来截取指定的DOM元素，并将生成的截图添加到页面中。可以根据实际需求调整配置选项和DOM元素的选取方式。此外，还可以将生成的图片数据上传到服务器或执行其他操作。

注意事项

• html2canvas只能截取可见的DOM元素，因此需要确保要截图的元素是可见的。
• 由于html2canvas是基于DOM构建截图的，因此如果页面中存在动态加载的DOM元素，可能会导致截图不完整或无法截取。
• 被截图的图片需要时允许跨域的，否则图片截图截不出来。公司场景的可以找运维或者后端配置一下就行
• 生成的图片大小是有限制的，如果图片过大，生成的图片会模糊，所以需要控制图片的大小
• DOM元素中不要使用背景图，清晰度影响会很大用img标签进行定位即可
• css 的filter: blur(radius)属性会影响到截图，截图截不出来那个模糊效果，需要模糊效果可以使用模糊效果的图片代替

其他方案 modern-screenshot

modern-screenshot 使用 HTML5 canvas 和 SVG 从 DOM 节点快速生成图像