Javascript - really remove image

Question

A have a page with image.

Javascript code periodically loads new content for image from server as data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAAB.... Well, you understand, it is image as base64 encoded.

Javascript code changes image src to new one, but it looks like old data is not being deleted.

If I leave page running for some time, it eats all the memory.

Is there some way to remove previous images completely?

Answer 1

I have a suggestion. Please test and see if it works for you.

1. Create blob from base64 string. Read: Creating a Blob from a base64 string in JavaScript

2. var url = URL.createObjectURL(blob). And set the url as src of image

3. When done, try URL.revokeObjectURL(url)

Answer 2

If I understand you correctly, you are downloading the image as a base64 encoded string, then passing that string into an img src? If that is the case it sounds like the scope of your strings is not expiring somehow. To ensure the deletion of a primitive object like a string, you must keep a reference to the string by proxy with an object. Something like below.

// Somewhere in a persistent scope like global
image_reference = {};

// In your ajax callback
if(image_reference.data != null) {
delete image_reference.data;
}
image_reference['data'] = response.data;
// Put image_reference.data into your img element