CODEWITHSUNDEEP
javascripthtmlimagecachingmemory-leaks
Skodsgn
Skodsgn

Reputation: 981

How to clear downloaded images from cache

How to clear downloaded images from browser cache?

Here is how i assing new src to <img>:

img.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width = this.width;
            canvas.height = this.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0);

            var dataURL = canvas.toDataURL("image/png");

            imageSrc = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

            self.$cameraImg.attr('src', 'data:image/png;base64,' + imageSrc);
        };
img.src = '/camera/image/vehicle/' + id + '/code/' + code + '/cam_no/1/';

After many downloads, browsers memory use grow to massive number (> 1gb), after that i get browser crash (Chrome and Firefox).

enter image description here

Upvotes: 0

Views: 174

Answers (2)

Shota
Shota

Reputation: 7330

You should do it from the server side. Thus it depends on what tech you are using there. Here are a lot of ideas how: How to set HTTP headers (for cache-control)?. But do not use HTML meta tag, as it is considered as a bad practice for cache control.

Upvotes: 1

Skodsgn
Skodsgn

Reputation: 981

I found solution.

Download image as base64 instead of image and dont use new Image object and canvas.

var xhr = $.ajax({
            type: "post",
            url: '/camera/image/vehicle/' + self.selected.id + '/code/' + code + '/cam_no/1/',
            data: {},
            success: function (o) {
                if (o) {
                    if (!o.err) {

                        self.$cameraImg.attr('src','');
                        self.$cameraImg.attr('src', 'data:image/png;base64,' + o);

                    } 
                }
            },
            error: function (xhr) {

            }
        });

Upvotes: 0

Related Questions