Question

如何清除浏览器缓存中下载的图像？

以下是我如何将新的src分配到<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/';

经过多次下载后，浏览器内存使用量增长到大量（> 1gb），之后我的浏览器崩溃（Chrome和Firefox）。

Answer 1

您应该从服务器端执行此操作。因此，这取决于您在那里使用的技术。以下是很多想法：How to set HTTP headers (for cache-control)?。但是不要使用HTML元标记，因为它被认为是缓存控制的一种不好的做法。

Answer 2

我找到了解决方案。

将图片下载为base64而不是image，不要使用new Image对象和画布。

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

            }
        });

如何从缓存中清除下载的图像

2 个答案: