是否可以将2个或更多的大画布缝合在一起以获得1个图像斑点？

Question

我们的应用程序具有一些“另存为图像”功能，该功能将获取一个图表（以纯HTML呈现）并将其导出为图像。为此，我们首先使用一个名为html2canvas的库将HTML转换为画布，然后使用canvas转换为Image以进行下载。

问题是用户可以扩展图表中的节点，因此图表可以变得越来越大，目前我们不限制图表可以扩展到多少。在某些时候，图表会变得太大，并且由于HTML5 Canvas中的像素限制，画布将无法继续运行。如果他们尝试这样做，我们会向他们显示错误消息。

[这是我的问题-我想知道是否可以通过使用多个画布对象来增加限制，通过在图表周围使用带有overflow: hidden的DIV，可以在网格中多次导出。现在，我有2个或更多的HTML5 Canvas大对象，我想将它们缝合在一起成为一个大图像。

// Just to show how to do one canvas
function exportCanvasToImage(canvas, fileName) {
  canvas.toBlob(b => saveAs(b, fileName));
}
/**
 * @param {Array.<Array>} canvasGrid 2D array of Canvas to stitch together
 * @param {String} fileName The name of file to write, i.e. "test.jpg"
 */
function exportLargeCanvasGridToImage(canvasGrid, fileName) {
  // is this possible?
}

Answer 1

您可以使用CanvasRenderingContext2D.drawImage()将一个画布的内容绘制在另一画布的内部，并且可以使用HTMLCanvasElement.toDataURL()将画布转换为数据URL。因此，您正在尝试的理论上应该可行，但我怀疑您可以使用这种方法来克服canvas API的技术限制。