Примечание: я отредактировал свой исходный пост, потому что проблема не в iOS, а в более общем плане.
Я создаю приложение с JavaScript, которое сокращает изображение на несколько частей через холст.
У меня есть два шага:
- Выбор изображения (из существующего или загрузка нового)
- Разрезать изображение на части используя canvas
Если я делаю процесс несколько раз, я замечаю, что в памяти создается много холстов. Я проверяю это, используя инструменты разработчика в Safari, а затем выбираю вкладку «Холст».
Проблема в том, что эти элементы холста действительно складываются. Если я сначала разрезаю изображение на 10 частей, а в следующем раунде я разрезаю на 20 частей, то в моей памяти останется 30 элементов холста.
Моя цель - удалить / очистить существующий Canvas, очистив память (или как лучше), потому что в противном случае я скоро столкнусь с проблемами с памятью.
Я уже пытался удалить Canvas, удалив его из DOM и установив для переменной значение null:
var myCanvas = document.getElementById('canvas');
myCanvas.parentElement.removeChild(myCanvas);
myCanvas = null;
Проблема здесь в том, что если я сейчас загружаю изображение с моего компьютера, холст все равно добавляется в память. Ранее вырезанные части (элементы холста) все еще там и не удалены:
Кроме того, поскольку я удалил элемент холста из DOM, нарезанный части больше не появляются на странице. Они находятся только на вкладке «Холст» в инструментах разработчика.
Я также пытался очистить холст:
// this.ctx is the canvas
this.ctx.clearRect(0, 0, this.ctx.canvas.width,
this.ctx.canvas.height);
this.ctx.canvas.height = 0;
this.ctx.canvas.width = 0;
this.ctx = null;
Он каким-то образом сбрасывает холст, но не удаляет его из памяти, так что это бесполезно для меня.
Если я обновлю sh страницу, память, конечно, будет очищена, но я буду использовать это в мобильном приложении позже, так что это не вариант для меня.
Есть идеи, как это решить?
Заранее большое спасибо за любую помощь!