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,7​​76像素 | | IE | 8,192像素 | N / A | | IE Mobile | 4,096像素 | N / A |