版权声明： https://blog.csdn.net/qq_32842925/article/details/83041380
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("鼠标右键点击生成的图片即可保存");
}