Можно ли сшить 2 или более больших холста, чтобы получить 1 изображение? - PullRequest
Новая
       8

Можно ли сшить 2 или более больших холста, чтобы получить 1 изображение?

0 голосов
/ 01 ноября 2019

В нашем приложении есть функция «Сохранить как изображение», которая берет диаграмму (отображаемую в простом HTML) и экспортирует ее в виде изображения. Для этого мы сначала используем библиотеку html2canvas для преобразования HTML в холст, затем мы используем canvas для конвертации в Image для загрузки.

Проблема в том, что пользователь может расширять узлы в диаграмме, ипоэтому график может становиться все больше и больше, в настоящее время мы не ограничиваем, насколько большой график может расширяться. В определенный момент диаграмма становится слишком большой, и холст больше не сможет функционировать из-за ограничений по пикселям в холсте HTML5. Мы показываем им сообщение об ошибке, если они пытаются это сделать.

Вот мой вопрос - мне интересно, смогу ли я увеличить лимит, используя несколько объектов canvas, используя DIV вокруг диаграммы с overflow: hidden Iможет экспортировать несколько раз в сетке. Теперь у меня есть 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?
}

1 Ответ

0 голосов
/ 01 ноября 2019

Вы можете нарисовать содержимое одного холста внутри другого, используя CanvasRenderingContext2D.drawImage(), и вы можете превратить холст в URL данных, используя HTMLCanvasElement.toDataURL(). То, что вы пытаетесь теоретически, должно быть возможным, но я сомневаюсь, что вы можете использовать этот подход, чтобы преодолеть технические ограничения API Canvas.

...