#!/bin/bash sh
//下载包
npm install --save html2canvas
<!DOCTYPE html>
<html>
<header></header>
<body>
<div style="width: 300px;height:500px;background-color: red;" ></div>
</body>
<script type="text/javascript" src="./dist/html2canvas.js"></script>
<script type="text/javascript">
function screenshot(Element,filename){
//获取当前页面canas
html2canvas(Element,{useCORS:true}).then(function (canvas) {
//获取图片数据
var imgData = canvas.toDataURL();
//保存图片
var saveFile = function(data, filename){
var save_link = document.createElementNS(
'http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
//创建事件
var event = document.createEvent('MouseEvents');
event.initMouseEvent(
'click', true, false, window,
0, 0, 0, 0, 0, false, false,
false, false, 0, null
);
save_link.dispatchEvent(event);
};
//下载文件
saveFile(imgData,filename);
})
}
screenshot(document.body,"001.jpg");
</script>
</html>
options参数
| 参数名称 | 类型 | 默认值 | 描述 |
| allowTaint | boolean | false | 允许跨域 |
| useCORS | boolean | false | 貌似与跨域有关，但和allowTaint不能共存 |
| proxy | string | undefined | 代理地址 |
| taintTest | boolean | true | 是否在渲染前测试图片 |
| timeout | number | 0 | 图片加载延迟，默认延迟为0，单位毫秒 |
| logging | boolean | false | 在Console中输出信息 |
| width | number | null | canvas的宽度设定 |
| height | number | null | canvas的高度设定 |
| background | string | #fff | canvas的背景颜色（未指定则为透明） |
| letterRendering | boolean | false | 在设置了字间距的时候有用 |
//引入
<script type="text/javascript" src="./dist/html2canvas.js"></script>
//写法1
html2canvas($(".box"),{
allowTaint:true,
taintTest:false,
width:"100px",
height:"100px",
onrendered:function(canvas){
var dataUrl = canvas.toDataURL("image/png",1.0);
var newImg = document.createElement("img");
newImg.src = dataUrl;
$(".box").empty().append(newImg);
newImg.style.width = "100%";
}
});
//写法2 下载到本地
function screenshot(Element,filename){
//获取当前页面canas
html2canvas(Element,{useCORS:true}).then(function (canvas) {
//获取图片数据
var imgData = canvas.toDataURL();
//下载图片
var saveFile = function(data, filename){
var save_link = document.createElementNS(
'http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
//创建事件
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false,window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
saveFile(imgData,filename);
})
}
//调用
screenshot(document.body,"001.png");
