Html2canvas是什么?
是一个脚本 这个脚本可以允许用户直接在浏览器上拍摄网页或其中一部分的"屏幕截图".屏幕截图是基于DOM,因此可能无法真实表示100%的准确度,因为它无法生成实际的屏幕截图,而是根据页面上的可用信息构建屏幕截图。
运行过程?
脚本遍历加载页面的DOM。它收集那里所有元素的信息,然后将其用于构建页面的表示形式。换句话说,它实际上并不截取页面的屏幕快照,而是根据它从DOM读取的属性来构建页面的表示形式。所以可能有些这个脚本识别不了的css或者html将会在编译过程中失效!
局限性
脚本使用的所有图像都必须位于相同的来源, 以便它无需代理即可读取它们。同样,如果canvas
页面上还有其他元素被跨域内容污染,它们将变脏并且无法被html2canvas读取。
该脚本不会呈现Flash或Java applet之类的插件内容。
安装
npm i html2canvas
导入
import html2canvas from 'html2canvas'
用法
html
<button
class="restore-btn"
@click="saveImage('html2canvas', '图片名称')"
>下载图片</button>
<div id="html2canvas" ref="html2canvas">
截取内容
</div>
js
//图片格式转换方法
dataURLToBlob(dataurl) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
//点击方法
saveImage(divText, imgText) {
let canvasID = this.$refs[divText];
let that = this;
let a = document.createElement('a');
html2canvas(canvasID).then(canvas => {
let dom = document.body.appendChild(canvas);
dom.style.display = 'none';
a.style.display = 'none';
document.body.removeChild(dom);
let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
a.setAttribute('href', URL.createObjectURL(blob));
//这块是保存图片操作 可以设置保存的图片的信息
a.setAttribute('download', imgText + '.png');
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
});
},
关于网络图片截取不了 是因为跨域,上面说过脚本使用的所有图像都必须位于相同的来源,这里我们只需要给图片上增加一个属性crossOrigin="Anonymous",以及对应后台做跨域处理就行了
html2canvas参数
名称 | 默认 | 描述 |
---|---|---|
async | true | 是否异步解析和呈现元素 |
allowTaint | false | 是否允许跨原始图像污染画布 |
backgroundColor | #ffffff | 画布背景颜色,如果在DOM中未指定,设置 null 为透明 |
canvas | null | 现有画布元素用作绘图的基础 |
foreignObjectRendering | false | 是否在浏览器支持的情况下使用ForeignObject渲染持 |
imageTimeout | 15000 | 加载图像的超时(以毫秒为单位,设置 0 为禁用超时 |
ignoreElements | (element)=>false | 谓词函数,用于从渲染中删除匹配元素 |
logging | true | 启用日志记录以进行调试 |
onclone | 在克隆文档进行渲染时调用的回调函数可用于修改将在不影响原始源文档的情况下呈现的内容。 | |
proxy | null | Url到 代理 ,用于加载跨源图像。如果留空,则不会加载跨原始图像。 |
removeContainer | true | 是否要清理克隆的DOM元素html2canvas会暂时创建 |
scale | window.devicePixelRatio | 用于渲染的比例,默认为浏览器设备像素比率 |
useCORS | false | 用来设置是否允许使用跨域的图片进行访问 |
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 | 渲染元素时使用的窗口宽度,这可能会影响媒体查询之类的东西 |
windowHeight | Window.innerHeght | 染时使用的窗口高度 Element ,这可能会影响媒体查询等内容 |
taintTest | true | 在渲染前测试图片 |