html2canvas-实现页面截图

html2canvas简介

该脚本允许您直接在用户浏览器上对网页或部分网页进行“截屏”。屏幕截图是基于DOM的,因此对于真实的表示可能不是100%准确的,因为它并不生成实际的屏幕截图,而是基于页面上可用的信息构建屏幕截图。

html2canvas官网

项目下载:https://github.com/niklasvh/html2canvas/

官方网址:https://html2canvas.hertzen.com/

支持的浏览器

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

基本语法

1
html2canvas(element, options);
1
2
3
4
5
6
7
8
html2canvas(document.body, {
onrendered: function(canvas) {
var url = canvas.toDataURL();//图片地址
document.body.appendChild(canvas);
},
width: 300,
height: 300
});

Tip: 这个语法可能存在问题,不建议使用。

或者使用ES6的promise(建议使用此语法)

1
2
3
4
//两个参数:所需要截图的元素id,截图后要执行的函数, canvas为截图后返回的最后一个canvas
html2canvas(document.getElementById('id')).then(function(canvas) {
document.body.appendChild(canvas);
});

可用参数

参数名称 默认值 描述
allowTaint false Whether to allow cross-origin images to taint the canvas
允许跨域
background #ffffff Canvas background color, if none is specified in DOM. Set null for transparent
canvas的背景颜色,如果没有设定默认透明
canvas null Existing canvas element to use as a base for drawing on
现有的canvas元素,用作绘图的基础
foreignObjectRendering false Whether to use ForeignObject rendering if the browser supports it
如果浏览器支持,是否使用ForeignObject渲染
imageTimeout 15000 Timeout for loading an image (in milliseconds). Set to 0 to disable timeout.
加载图像的超时(以毫秒为单位)。设置为0以禁用超时。
ignoreElements (element) => false Predicate function which removes the matching elements from the render.
谓词函数,它从呈现中删除匹配的元素。
logging true Enable logging for debug purposes
为调试目的启用日志记录,在console.log()中输出信息
onclone null Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document.
回调函数(在克隆文档以进行呈现时调用)可用于修改将要呈现的内容,而不影响原始源文档。
proxy null Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won’t be loaded.
到代理的Url,用于加载跨源图像。如果留空,则不会加载交叉源图像。
removeContainer true Whether to cleanup the cloned DOM elements html2canvas creates temporarily
是否清除克隆的DOM元素html2canvas临时创建的
scale window.devicePixelRatio The scale to use for rendering. Defaults to the browsers device pixel ratio.
用于渲染的比例。默认的浏览器设备像素比例。
useCORS false Whether to attempt to load images from a server using CORS
是否尝试使用CORS从服务器加载图像
width Element width The width of the canvas
canvas宽度设定
height Element height The height of the canvas
canvas高度设定
x Element x-offset Crop canvas x-coordinate
坐标轴x位置
y Element y-offset Crop canvas y-coordinate
坐标轴y位置
scrollX Element scrollX The x-scroll position to used when rendering element, (for example if the Element uses position: fixed)
渲染元素时使用的x-scroll位置(例如,如果元素使用position: fixed)
scrollY Element scrollY The y-scroll position to used when rendering element, (for example if the Element uses position: fixed)
渲染元素时使用的y-scroll位置(例如,如果元素使用position: fixed)
windowWidth Window.innerWidth Window width to use when rendering Element, which may affect things like Media queries
显示元素时使用的窗口宽度,这可能会影响媒体查询等内容
windowHeight Window.innerHeight Window height to use when rendering Element, which may affect things like Media queries
显示元素时使用的窗口高度,这可能会影响媒体查询等内容

如果希望从呈现中排除某些Elements,可以向这些元素添加一个data-html2canvas-ignore属性,html2canvas将从呈现中排除这些元素。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html2canvas example</title>
</head>

<body>
<div id="view"
style="background:url(./imgs/goodspic01.jpg) 50%; width: 700px; height: 500px;background-repeat:no-repeat; background-color: #8BC34A;">
<input type="button" value="截图" onclick="takeScreenshot()">
</div>

<script src="./lib/html2canvas/html2canvas.js"></script>
<script>
function takeScreenshot() {
console.log('开始截图');

html2canvas(document.getElementById('view'), {
// width: 300,
// height: 300
}).then(canvas => {
console.log(canvas.toDataURL("image/png"));
document.body.appendChild(canvas);
});
}
</script>
</body>

</html>

效果图

截图前
截图前

截图后
截图后

坚持原创技术分享,您的支持将鼓励我继续创作!