How to clear downloaded images from cache

Question

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).

score 1 · Answer 1 · edited May 23 '17 at 12:25

1

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.

edited May 23 '17 at 12:25

Community

1
1

answered Apr 22 '17 at 11:23

Shota

6,910
9
37
67

score 0 · Accepted Answer · answered Apr 24 '17 at 09:43

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) {

            }
        });

How to clear downloaded images from cache

2 Answers2