一文读懂 html2canvas：网页截图和更多好玩的用法

最新推荐文章于 2026-04-22 10:55:34 发布

原创

最新推荐文章于 2026-04-22 10:55:34 发布 · 2.2k 阅读

标签

#前端

前言

在前端开发中，诸多业务需求都依赖于对网页内容的灵活处理。其中，把网页的特定部分甚至整个页面精准截取并保存为图片，这一功能在诸多场景下都发挥着关键作用。无论是为了快速生成可视化报告，还是方便用户分享精彩页面内容，网页截图功能都不可或缺。接下来，本文将深入探讨如何借助 JavaScript 库 html2canvas 轻松达成这一实用功能。

html2canvas

html2canvas 主要用于将 HTML 元素渲染为 Canvas 图像。它会递归地遍历指定的 DOM 元素及其子元素，收集每个元素的样式信息（如颜色、字体、边框等）和布局信息（如位置、大小），将收集到的 CSS 样式解析为 Canvas 可以理解的属性，例如将 color 属性转换为 Canvas 的填充颜色，并将其转换为图像格式，通常用于生成网页截图或导出页面内容。

html2canvas 的属性

属性名	默认值	描述
allowTaint	false	用于控制是否允许跨域图像污染画布。如果为 true，那么跨域的图像会被加载到画布上，但加载后的画布会被标记为 “已污染”，无法再将其内容导出为数据 URL 或进行其他操作；如果为 false，则会尝试使用其他方法处理跨域图像（如 useCORS 选项）。
backgroundColor	#ffffff	指定截图的背景颜色。如果要使背景透明，可以将其设置为 null。它接受标准的 CSS 颜色值，如十六进制颜色码、RGB 或 RGBA 等。
canvas	null	允许你传入一个现有的 canvas 元素，html2canvas 会将截图内容绘制到这个传入的 canvas 上，而不是创建一个新的 canvas 元素。如果设置为 null，则会自动创建一个新的 canvas 来进行绘制。
foreignObjectRendering	false	该选项用于控制是否启用 foreignObject 渲染。foreignObject 是 SVG 中的一个元素，允许在 SVG 中嵌入 HTML 内容。当设置为 true 时，会尝试使用 foreignObject 来渲染 HTML 元素，但并非所有浏览器都支持这种渲染方式。
imageTimeout	15000	指定加载图像的超时时间（以毫秒为单位）。如果在这个时间内图像没有加载完成，html2canvas 会继续进行截图，可能会导致部分图像无法显示。
ignoreElements	(element) => false	这是一个回调函数，用于过滤需要忽略的元素。该函数接受一个 HTML 元素作为参数，返回一个布尔值。如果返回 true，则该元素及其子元素将不会被包含在截图中；如果返回 false，则会正常包含在截图中。
logging	true	控制是否在控制台输出日志信息。
onclone	null	这是一个回调函数，在 html2canvas 克隆文档树以进行截图之前调用。该函数接受一个克隆后的文档对象作为参数，你可以在这个回调函数中对克隆后的文档进行一些修改，例如添加或删除元素等。
proxy	null	指定一个代理 URL，用于处理跨域图像的加载。当加载跨域图像时，html2canvas 会将请求发送到这个代理 URL，由代理服务器来获取图像数据并返回给客户端。
removeContainer	true	控制在截图完成后是否移除临时创建的容器元素。在进行截图时，html2canvas 会创建一些临时的容器元素来处理渲染，当设置为 true 时，截图完成后会自动移除这些临时容器；当设置为 false 时，这些临时容器将保留在文档中。
scale	window.devicePixelRatio	指定截图的缩放比例。默认情况下，使用设备的像素比作为缩放比例，以确保在高分辨率屏幕上也能获得清晰的截图。可以手动设置这个值来调整截图的大小。
useCORS	false	控制是否尝试使用 CORS（跨域资源共享）来加载跨域图像。当设置为 true 时，html2canvas 会在加载跨域图像时添加 crossOrigin 属性，尝试通过 CORS 机制来加载图像，这样加载后的画布不会被标记为 “已污染”，可以正常导出数据。
width	当前元素 width	指定截图的宽度。默认情况下，使用待截图元素的实际宽度。可以手动设置这个值来调整截图的宽度。
height	当前元素 height	指定截图的高度。默认情况下，使用待截图元素的实际高度。可以手动设置这个值来调整截图的高度。
x	当前元素 x-offset	指定截图区域相对于待截图元素左上角的水平偏移量。默认情况下，从元素的左上角开始截图。
y	当前元素 y-offset	指定截图区域相对于待截图元素左上角的垂直偏移量。默认情况下，从元素的左上角开始截图。
scrollX	当前元素 scrollX	指定待截图元素的水平滚动位置。默认情况下，使用元素当前的水平滚动位置。
scrollY	当前元素 scrollY	指定待截图元素的垂直滚动位置。默认情况下，使用元素当前的垂直滚动位置。
windowWidth	Window.innerWidth	指定截图时模拟的窗口宽度。默认情况下，使用当前窗口的内部宽度。
windowHeight	Window.innerHeight	指定截图时模拟的窗口高度。默认情况下，使用当前窗口的内部高度。

一、安装

可以通过 npm 或 yarn 安装插件。

npm install html2canvas --save

或

yarn add html2canvas

二、注册引入

3.1 全局注册组件

main.js 中引入并注册。

import html2canvas from 'html2canvas';
Vue.prototype.$html2canvas = html2canvas;

3.2 单个组件引入

import html2canvas from 'html2canvas';

三、基础使用

<template>
  <div>
    <div id="captureArea">
      <h1>这是要截图的内容</h1>
      <p>这里是一些示例文本。</p>
    </div>
    <but

最低0.47元/天解锁文章