html2canvas配置详情介绍,该插件可用来截图HTML
04/06
| html2canvas配置详情介绍 | ||
| 参数 | 默认值 | 参数说明 |
| allowTaint | FALSE | 是否允许跨域图像污染画布 |
| backgroundColor | #ffffff | 画布背景色（如果未在DOM中指定）。 设置null为透明 |
| canvas | null | 现有画布元素用作绘图的基础 |
| foreignObjectRendering | FALSE | 如果浏览器支持，是否使用ForeignObject渲染 |
| imageTimeout | 15000 | 加载图像的超时时间（以毫秒为单位）。 设置为0以禁用超时。 |
| ignoreElements | (element) => false | 谓词功能，可从渲染中删除匹配的元素。 |
| logging | TRUE | 启用日志记录以进行调试 |
| onclone | null | 克隆文档以进行渲染时调用的回调函数可用于修改将要渲染的内容，而不会影响原始源文档。 |
| proxy | null | 指向要用于加载跨域图像的代理。 如果留空，则不会加载跨域图像。 |
| removeContainer | TRUE | 是否清除HTML2canvas临时创建的克隆DOM元素 |
| scale | window.devicePixelRatio | 用于渲染的比例尺。 默认为浏览器设备像素比率。 |
| useCORS | FALSE | 是否尝试使用CORS从服务器加载图像 |
| width | Element width | 画布的宽度 |
| height | Element height | 画布的高度 |
| x | Element x-offset | 裁剪画布X坐标 |
| y | Element y-offset | 裁剪画布y坐标 |
| scrollX | Element scrollX | 渲染元素时要使用的x滚动位置（例如，如果元素使用的位置：固定） |
| scrollY | Element scrollY | 呈现元素时要使用的y-scroll位置（例如，如果元素使用的位置：固定） |
| windowWidth | Window.innerWidth | 渲染元素时要使用的窗口宽度，这可能会影响媒体查询之类的内容 |
| windowHeight | Window.innerHeight | 渲染元素时要使用的窗口高度，这可能会影响媒体查询 |
下面是一个使用案例：
document.ready = function(){
//截图弹窗
$('.screen').click(function(){
//获取需要截图的元素
const tableObj = document.querySelector("#table-container");
//把滚动条设置到最顶和最左
window.pageYOffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
document.documentElement.scrollLeft = 0;
document.body.scrollLeft = 0;
//截图的图片宽高
let width = $(tableObj).width()+20;
let height = $(tableObj).height()+16;
let params = {
useCORS:true,
width:width,
height:height,
x: tableObj.offsetLeft - 2, //
y: tableObj.offsetTop - 8,
dpi: window.devicePixelRatio * 2, // 解决图片不清晰问题
scale:1.5
};
//开始截图
html2canvas(tableObj,params).then(canvas => {
//这里可以处理图片了
document.getElementById('img').src =canvas.toDataURL();
document.getElementById('scree-a-img').href =canvas.toDataURL();
});
});
};
版权属于：
Dcr163的博客
本文链接：
http://dcr163.cn/239.html（转载时请注明本文出处及文章链接）
哟呵，上班还有空更新，还写那么多，是不是工作量不饱和
