У меня есть HTML-страница, которая берет данные изображения base64 из WebSocket и затем отображает их пользователю. Изображение периодически изменяется (новое изображение base64 помещается поверх сокета), поэтому новое изображение должно быть декодировано и затем отображено пользователю.
Моя текущая проблема заключается в том, что после обновления изображения кажется, что предыдущие изображения никогда не удаляются из памяти браузера. Если я загляну на страницу ресурсов Chrome, то смогу увидеть все изображения, которые все еще находятся в памяти браузера. Если файлы изображений достаточно велики и изменяются достаточно быстро, память браузера заполнится до такой степени, что она вылетит.
Есть идеи, как это можно решить? Я вставил фрагмент кода ниже.
<html>
<head>
<title>Presenter</title>
<style>
html,body{font:normal 0.9em arial,helvetica;text-align:center;}
#dynamicImage { margin:0px auto; }
</style>
<script type="text/javascript">
function handleMessage(data) {
switch(data.type) {
case 'imageUpdate':
// replace the image
$('#dynamicImage').attr({
'src': "data:image/jpeg;base64," + data.image,
});
break;
}
}
</script>
</head>
<body>
<div id="dynamicImageWrapper">
<img id="dynamicImage" src="./WhitePixel45w.jpg" />
</div>
</body>
</html>