html2canvas实现指定文档元素截图

html2canvas.js

• html2canvas脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM，因此它可能不是真实表示的100％准确，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。
• 参数或者说组态

名称	默认	描述
async	true	是否异步解析和呈现元素
allowTaint	false	是否允许跨原始图像污染画布
backgroundColor	#ffffff	画布背景颜色，如果在DOM中未指定。设置 null 为透明
canvas	null	canvas 用作绘图基础的现有 元素
foreignObjectRendering	false	是否在浏览器支持的情况下使用ForeignObject渲染
imageTimeout	15000	加载图像的超时（以毫秒为单位）。设置 0 为禁用超时。
ignoreElements	(element) => false	谓词函数，用于从渲染中删除匹配元素。
logging	true	启用日志记录以进行调试
onclone	null	在克隆文档进行渲染时调用的回调函数可用于修改将在不影响原始源文档的情况下呈现的内容。
proxy	null	Url到 代理 ，用于加载跨源图像。如果留空，则不会加载跨原始图像。
removeContainer	true	是否要清理克隆的DOM元素html2canvas会暂时创建
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滚动位置（例如，如果Element使用 position: fixed ）
scrollY	Element scrollY	渲染元素时使用的y滚动位置（例如，如果Element使用 position: fixed ）
windowWidth	Window.innerWidth	渲染时使用的窗口宽度 Element ，可能会影响媒体查询等内容
windowHeight	Window.innerHeight	渲染时使用的窗口高度 Element ，这可能会影响媒体查询等内容

一个简单的例子

• 脚本引入，html2canvas去官网下载或者从直接下载我调试过的，不过我调试过的需要2个资源分；

<script src="public/js/html2canvas.js"></script>
<script src="public/js/jquery-2.1.1.min.js"></script>

• html部分
  

<div class="btn">点击截图</div>
    <div id="targetDom" class="main">
        <div id="capture" style="padding: 10px; background: #f5da55">
        	<h4 style="color: #000; ">Hello world!</h4>
        <img src="public/avatar/myavatar.jpg" alt="" srcset="">
    </div>
</div>

• 简单使用html2canvas脚本,第一个参数为要保存内容的元素对象，然后Promise对象会将截取的图片传递给参数canvas，创建一个节点将canvas添加为文档节点可以显示出来，如果直接调用文件保存可以将图片主动保存下来；

$(".btn").on("click", function () {
    html2canvas(document.querySelector("#capture")).then(canvas => {
        document.body.appendChild(canvas)
    });
})

html2canvas内部是异步执行的，然后返回一个Promise对象，使用then方法进行异步执行；

里面的坑

• 脱离了文档流，或者文档流异常的元素会无法被截取下来！一定要清楚记得，它只会截取到目标元素宽高范围内的内容！！！

如果我给图片加一个定位：

那么截取下来你的图会是这样，虽然img仍然是截取目标里的元素，但是因为目标元素的边界划定了范围使得img不能被截取！

• 如果是浮动的元素：
  

截取到的图片是这样的

一个复杂的例子

• 此处仅提供js代码，html结构大家可以去下面的链接看：

let takeScreenShoot = (ele) => {
    // console.log(ele);
    for (let index = 0; index < ele.length; index++) {
        const element = ele[index];
        // console.log(element);
        html2canvas(element).then(canvas => {
            // console.log(canvas);
            doc.appendChild(canvas)
            //html2canvas有bug，保存的图片有白边
            let ctx = canvas.getContext("2d");
            ctx.fillStyle = "red";
            ctx.clearRect(0, 0, 1, 534);
            document.getElementById("theeditor").scrollTo(0, 100000000);
        });
    }
}
btCreatpic.onclick = () => {
    takeScreenShoot(document.getElementsByClassName("resultimg"));
    alert("鼠标右键点击生成的图片即可保存");
}

测试地址点击跳转