Canvas утечка ресурсов

@cyb0rg_01 · Регистрация: 05.05.2014

Студворк — интернет-сервис помощи студентам

После вызова ф-ции:

JavaScript
1
var imgData = canvas.toDataURL();

или отрисовки одного канваса в другой с помощью вызова ф-ции:

JavaScript
1
2
bufferContext.drawImage(canvas, 0, 0, sheet.image.width, sheet.image.height,
                       0, 0, buffer.width, buffer.height);

Начинаются жуткие тормоза при дальнейшей работе на канвасе.

Даже после вызова следующего кода для копирования части изображения, начинаются тормоза:

JavaScript
1
2
3
4
5
6
7
        var buffer = document.createElement('canvas');
        var bufferContext = buffer.getContext('2d');
        buffer.width = 10;
        buffer.height = 10;
 
        bufferContext.drawImage(canvas, 0, 0, 10, 10,
                       0, 0, 10, 10);

В чем может быть проблема?

Добавлено через 7 минут
это 100% утечка ресурсов: до вызова ф-ции:

JavaScript
1
canvas.toDataURL();

память: 50-70мб на вкладку
после: 150мб

Добавлено через 1 минуту
сборщик мусора не работает после ф-ции canvas.toDataURL()? Или я что-то забыл или не понимаю?

@XRoy · 19.08.2016, 21:25

pro_100_gram,
Браузер всегда хранит "скачанные" изображения в оперативной памяти, что бы не перегружать каждый раз одно и тоже изображение, так что изображение просто кешируется

@cyb0rg_01 · 19.08.2016, 22:19 **[ТС]**

XRoy, как это относится к ф-ции

JavaScript
1
canvas.toDataURL();

. Кэширование отключено, а после вызова ф-ции

JavaScript
1
canvas.toDataURL();

браузер сжирает 100мб в частную память (можно увидеть в диспетчере задач хрома). При этом вкладка начинает тормозить. Что за частная память и как туда попадает ???ЧТО-ТО??? неизвестно.

Добавлено через 11 минут
можете сами попробовать, посмотрите сколько вкладка ест до нажатия кнопки "утечка памяти" и после.
https://jsfiddle.net/k0cxw5r2/

Как решить проблему неизвестно.

@XRoy · 19.08.2016, 23:31

pro_100_gram,
Примитивный пример, то что все все-равно хранится в оперативной памяти, создали объект и не присвоили ему ссылку, в итоге не знаем что удалять
https://jsfiddle.net/k0cxw5r2/1/

@cyb0rg_01 · 20.08.2016, 08:45 **[ТС]**

XRoy, это не работает. Посмотрите сколько потребляет вкладка до и после.

К тому же этим должен заниматься сборщик мусора.

Добавлено через 16 минут
Я решил проблему бубном, для моего случая это работает:

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*before: 
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
*/
 
canvas.width = 5000;
canvas.height = 5000;
reDraw();
//ToDO: canvas.toDataURL();
 
//restore
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
reDraw();

Сама причина неизвестна.

@XRoy · 20.08.2016, 12:03

pro_100_gram,
Без проблем очистило память с пару гигов до 200 метров

Тут уж есть разница, толи иметь много разных изображений или одно но которое меняется

@cyb0rg_01 · 21.08.2016, 09:22 **[ТС]**

XRoy, проблема в том, что изначально было 50-70, после первого вызова вышеуказанной ф-ции размер меняется до 150, последующие вызовы не влияют, т.к. память возвращается к 150. В вашем примере происходит ручное удаление ресурсов, причем без необходимости, т.к. при выходе из ф-ции запускается сборщик мусора. Результат тот же память меньше 150 не падает, т.е. толку от этих действий нет, или вы не заметили, что изначально код вкладка потребляла 30-50мб?

У меня на живом примере эти 150мб занятой памяти дают жуткие тормоза и только изменение размеров холста помогают решить проблему.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@XRoy 871 / 721 / 304 Регистрация: 15.04.2013 Сообщений: 2,047 Записей в блоге: 5
	19.08.2016, 21:25
	pro_100_gram, Браузер всегда хранит "скачанные" изображения в оперативной памяти, что бы не перегружать каждый раз одно и тоже изображение, так что изображение просто кешируется 0

@XRoy 871 / 721 / 304 Регистрация: 15.04.2013 Сообщений: 2,047 Записей в блоге: 5
	19.08.2016, 23:31
	pro_100_gram, Примитивный пример, то что все все-равно хранится в оперативной памяти, создали объект и не присвоили ему ссылку, в итоге не знаем что удалять https://jsfiddle.net/k0cxw5r2/1/ 0

@XRoy 871 / 721 / 304 Регистрация: 15.04.2013 Сообщений: 2,047 Записей в блоге: 5
	20.08.2016, 12:03
	pro_100_gram, Без проблем очистило память с пару гигов до 200 метров Тут уж есть разница, толи иметь много разных изображений или одно но которое меняется 0

@cyb0rg_01 Фрилансер 735 / 352 / 96 Регистрация: 05.05.2014 Сообщений: 2,621
	21.08.2016, 09:22 [ТС]
	XRoy, проблема в том, что изначально было 50-70, после первого вызова вышеуказанной ф-ции размер меняется до 150, последующие вызовы не влияют, т.к. память возвращается к 150. В вашем примере происходит ручное удаление ресурсов, причем без необходимости, т.к. при выходе из ф-ции запускается сборщик мусора. Результат тот же память меньше 150 не падает, т.е. толку от этих действий нет, или вы не заметили, что изначально код вкладка потребляла 30-50мб? У меня на живом примере эти 150мб занятой памяти дают жуткие тормоза и только изменение размеров холста помогают решить проблему. 0