Image placeholder

html2canvas – 一个优秀的 JavaScript 截图工具

Image placeholder
F2EX JavaScript 2021-06-22

html2canvas 可以让你直接在用户浏览器中对网页进行屏幕截图或对部分元素进行截图。屏幕截图基于 DOM，因此可能无法 100% 准确真实呈现，因为它是根据页面上的可用元素构建屏幕截图。html2canvas 在移动端支持良好，例如可以制作带有一键截图分享的 H5 等。

下载演示

html2canvas 的工作原理是遍历所加载页面的 DOM。收集所有元素的信息，然后使用这些信息来重新构建页面。换句话说，它实际上并没有真正的对页面进行屏幕截图，而是根据从页面 DOM 读取的属性重新构建画布区域。因此，它只能正确渲染它支持的 CSS 属性。

浏览器兼容性

  • Firefox 3.5+
  • Google Chrome
  • Opera 12+
  • IE9+
  • Edge
  • Safari 6+

安装

你可以通过 npm 安装 html2canvas ，或者点击上面的下载按钮直接下载。

npm

npm install html2canvas
import html2canvas from 'html2canvas';

用法

HTML

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

JavaScript

可使用 html2canvas(element, options); 以开启可用选项。

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

选项

这些是所有可用的配置选项。

Name Default Description
allowTaint false 是否允许将跨域图像渲染到画布
backgroundColor #ffffff 画布背景颜色，如果在 DOM 中没有指定，默认为白色。设置为 null 是背景透明
canvas null 现有的画布元素用作绘图的基础
foreignObjectRendering false 是否使用 ForeignObject 渲染，如果浏览器支持
imageTimeout 15000 加载图像的超时时间（以毫秒为单位）。设置为 0 以禁用超时。
ignoreElements (element) => false 在渲染中忽略匹配的元素。
logging true 为调试启用日志记录
onclone null 当文档被克隆进行渲染时调用的回调函数，可用于修改将要渲染的内容，而不会影响原始源文档。
proxy null 用于加载跨域图像的 URL。如果留空，则不会加载跨域图像。
removeContainer true 是否清理html2canvas临时创建的克隆DOM元素
scale window.devicePixelRatio 用于渲染的比例。默认为浏览器设备像素比。调大比例可防止在移动端截图模糊。
useCORS false 是否使用 CORS 从服务器加载图像
width Element width canvas的宽度
height Element height canvas的高度
x Element x-offset 裁剪画布 x 坐标
y Element y-offset 裁剪画布 y 坐标
scrollX Element scrollX 渲染元素时 x 轴滚动位置，（例如，如果元素使用 position: fixed)
scrollY Element scrollY 渲染元素时 y 轴滚动位置，（例如，如果元素使用 position: fixed)
windowWidth Window.innerWidth 渲染元素时使用的窗口宽度，这可能会影响媒体查询等内容
windowHeight Window.innerHeight 渲染元素时使用的窗口高度，这可能会影响媒体查询等内容

如果你希望从渲染中排除某些元素，你可以向这些元素添加 data-html2canvas-ignore 属性，html2canvas 会将它们从渲染中排除。

支持的 CSS 属性

下面是所有支持的 CSS 属性和值的列表。

  • background
    • background-clip (Does not support text)
    • background-color
    • background-image
      • url()
      • linear-gradient()
      • radial-gradient()
    • background-origin
    • background-position
    • background-size
  • border
    • border-color
    • border-radius
    • border-style (Only supports solid)
    • border-width
  • bottom
  • box-sizing
  • content
  • color
  • display
  • flex
  • float
  • font
    • font-family
    • font-size
    • font-style
    • font-variant
    • font-weight
  • height
  • left
  • letter-spacing
  • line-break
  • list-style
    • list-style-image
    • list-style-position
    • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • overflow
  • overflow-wrap
  • padding
  • position
  • right
  • text-align
  • text-decoration
    • text-decoration-color
    • text-decoration-line
    • text-decoration-style (Only supports solid)
  • text-shadow
  • text-transform
  • top
  • transform (Limited support)
  • visibility
  • white-space
  • width
  • word-break
  • word-spacing
  • word-wrap
  • z-index

不支持的 CSS 属性

目前不支持下面这些 CSS 属性。

2021-06-22

相关推荐

JavaScript
Multi-Level Menu – 附带延迟动画的多级菜单
Animation
JavaScript
html5tooltips.js – 一款轻量级的3D工具提示插件
HTML5
JavaScript
SVELTE – 通过编译原生JavaScript操作DOM的前端框架
JavaScript
JavaScript
Plyr – 一个轻量级的 HTML5 播放器
HTML5