Ошибка холста drawImage

Question

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

/** FrontendCanvas */ 
// HTML 
<canvas id="canvas"></canvas> 

// 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 with a background image).

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) 

Мое предположение было бы, что я тянусь максимальный размер холста, и это сброшена, но это не кажется, случай, потому что:

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

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

Любая помощь будет очень признательна!

Спасибо.

Answer 1

Оо, эти размеры (62322 х 50946) являются способом за пределами того, что вы можете использовать с холстом - даже в 2013 году: :-)

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

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

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

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