1.0.1 • Published 5 years ago
html2canvas-paging v1.0.1
html2canvas-paging
当使用html2canvas进行截图时,当被截图的内容长度超过浏览器canvas长度的限制,超出的部分会被忽略,为了突破浏览器canvas最大高度的限制,你可以使用 html2canvas-paging 将截图内容进行分页,返回多个被截取内容。
使用
html2canvas-paging的用法与html2canvas完全相同,当你不需要分页截取的时候,你可以把它当做一个html2canvas的包裹器。具体的参数可以参照html2canvas使用文档
需要注意的是, html2canvas-paging 返回的promise对象, 将返回一个canvas数组,而不是一个canvas对象
import html2canvas from 'html2canvas-paging'
html2canvas(document.body).then(function(canvases) {
canvases.forEach(canvas => {
document.body.appendChild(canvas);
})
});
当你需要分页截图的时候, html2canvas-paging 在 html2canvas 支持的可选参数之上, 新增了paging
参数, 你可以设置分页截取图片的 width
和 height
import html2canvas from 'html2canvas-paging'
html2canvas(document.body, {
paging: {
width: 1000,
height: 10000
}
}).then(function(canvases) {
canvases.forEach(canvas => {
document.body.appendChild(canvas);
})
});
浏览器canvas限制
浏览器 | 最大高度 | 最大面积 |
---|---|---|
chrome | 32,767像素 | 268,435,456像素 |
firfox | 32,767像素 | 472,907,776像素 |
IE | 8,192像素 | N / A |
IE Mobile | 4,096像素 | N / A |