Ошибка размера canvasа drawImage

Я использую два htmlcanvasа, fronendCanvas является видимым для пользователей и является частью дерева DOM html и имеет 100% ширины и высоты windows, backendCanvas создается на javascript-коде и используется для хранения огромную диаграмму, которую мне нужно рисовать.

/** FrontendCanvas */ // HTML  // JavaScript frontCanvas.width = window.innerWidth; frontCanvas.height = window.innerHeight; // CSS #canvas { display: block; background-color: #dddddd; } /** BackendCanvas */ // JavaScript backCanvas = document.createElement('canvas'); backCanvas.width = diagram.maxX; backCanvas.height = diagram.maxY; 

В принципе, чтобы иметь гладкую визуализацию, frontendCanvas показывает только часть огромного изображения, нарисованного в backendCanvas, с помощью функции drawImage (пользователь может использовать мышь, чтобы перетащить область визуализации по диаграмме, см. Пример Move HTML5 Canvas с фоновым изображением ).

 frontCanvas.getContext('2d').drawImage( backCanvas, (-ix - offsetX), (-iy - offsetY), (frontCanvas.width), (frontCanvas.height), 0, 0, (frontCanvas.width), (frontCanvas.height) ); 

Когда я устанавливаю ширину и высоту backendCanvas до 15000, все работает нормально, но когда я устанавливаю его на тот размер, который мне действительно нужен, ширина 62322 и высота 50946, то как-то drawImage больше не работает и выдает ошибку размера:

 IndexSizeError: Index or size is negative or greater than the allowed amount (frontCanvas.height) 

Я предполагаю, что я достиг максимального размера canvasа, и он будет сброшен, но это не похоже на то, потому что:

  1. в документе canvas указано, что ширина и высота canvasа – это длина без знака, поэтому намного больше, чем числа, о которых я упоминал;

  2. Я проверил размер backendCanvas прямо перед вызовом функции drawImage, и это правильно.

Любая помощь будет очень высоко ценится!

Благодарю.

Oo, эти размеры (62322 x 50946) находятся вне того, что вы можете использовать с canvasом – даже в 2013 году.: 🙂

Максимальный текущий поддерживаемый размер в основных браузерах варьируется от 6 до 15 000 пунктов в зависимости от реализации (всего несколько месяцев назад только 6-8000). Это связано с реальной потребностью с большинством методов, а также с аппаратным ускорением, памятью и т. Д.

Необработанный размер изображения, который вы хотите использовать, составляет 11,83 ГБ (RGB + альфа, поскольку canvas использует только RGBA). Кроме того, вам нужно будет сохранить исходное изображение где-нибудь в памяти, прежде чем вы сможете нарисовать его на canvasе, что означает, что вы используете 23-битную память даже до начала забавы. Это заставит пейджинг на большинстве компьютеров, что сделает все очень медленным.

То, что вам нужно реализовать здесь, – это технология разбиения / кэширования / буферизации (подумайте, карты Google – вот почему они разбивают карты).

Описание этого, возможно, слишком велико для этого сайта Q & A, поэтому я также могу предложить вам посмотреть, например, PanJS3 или Leaflet . Отказ от ответственности: я не знаю эти библиотеки, но вы можете, по крайней мере, изучить их, чтобы посмотреть, как они работают с большими изображениями / картами.