html2canvas使用文档(vue举例)
作者：温其如玉_zxh
html2canvas.js是一款可以在网页上实现页面截图的js,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功能,这篇文章主要给大家介绍了关于html2canvas使用的相关资料,需要的朋友可以参考下
一、安装
Install NPM
npm install --save html2canvas
Install Yarn
yarn add html2canvas
二、引入
import html2canvas from 'html2canvas';
三、使用
以 vue 举例，这样写起来比较方便
<div ref="picture">
<h4>Hello world!</h4>
</div>
// 配置项
const setup = {
useCORS: true, // 使用跨域
};
html2canvas(this.$refs.picture, setup).then((canvas) => {
document.body.appendChild(canvas); // 自动在下方显示绘制的canvas图片
});
如果想要将图片导出，可以这样写
// 生成图片
creatImg() {
const setup = {
useCORS: true, // 使用跨域
};
html2canvas(this.$refs.picture, setup).then((canvas) => {
const link = canvas.toDataURL("image/jpg");
this.exportPicture(link, "文件名");
});
}
// 导出图片
exportPicture(link, name = "未命名文件") {
const file = document.createElement("a");
file.style.display = "none";
file.href = link;
file.download = decodeURI(name);
document.body.appendChild(file);
file.click();
document.body.removeChild(file);
}
四、配置项
| 名称 | 默认值 | 描述 |
|---|---|---|
| allowTaint | false | 是否允许跨源图像污染画布 |
| backgroundColor | #ffffff | 画布背景色（如果在DOM中未指定），为透明设置null |
| canvas | null | 用作绘图基础的现有画布元素 |
| foreignObjectRendering | false | 如果浏览器支持ForeignObject渲染，是否使用它 |
| imageTimeout | 15000 | 加载图像超时（毫秒），设置为0可禁用超时 |
| logging | true | 为调试目的启用日志记录 |
| proxy | null | 用于加载跨源图像的代理的Url。如果留空，则不会加载跨原点图像。 |
| 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滚动位置（例如，如果元素使用位置：fixed） |
| scrollY | Element scrollY | 渲染元素时要使用的y轴滚动位置（例如，如果元素使用位置：fixed） |
| windowWidth | Window.innerWidth | 渲染Element时使用的窗口宽度，这可能会影响Media查询等内容 |
| windowHeight | Window.innerHeight | 渲染Element时使用的窗口高度，这可能会影响Media查询等内容 |
大部分情况下使用默认配置即可，如有需要，可根据配置项修改。
总结
到此这篇关于html2canvas使用文档的文章就介绍到这了,更多相关html2canvas使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！