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);

html2canvas(document.body, {
  onrendered: function(canvas) {
    var url = canvas.toDataURL();//图片地址
    document.body.appendChild(canvas);
  },
  width: 300,
  height: 300
});

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

或者使用ES6的promise（建议使用此语法）

//两个参数：所需要截图的元素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将从呈现中排除这些元素。

例子

<!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>

效果图

截图前

截图后