javascript - 来自 localStorage url 的图像返回 [object ArrayBuffer]

Question

我尝试使用本地存储来加快我的网站加载图像和音频文件的速度，所以我用 java 脚本设置我的图片文件，如下所示:

var req = new XMLHttpRequest();
        req.onload = function (e) {
            var arraybuffer = oReq.response;
        }
        req.open("GET", '/zTest.jpg');
        req.responseType = "arraybuffer";
        req.send();
        req.addEventListener('readystatechange', function () {
            if (req.readyState === 4) {
                localStorage.setItem('photo', req.response);
            }
        });

在其他页面中我使用此代码返回我的文件

var img = new Image();
        img.src = localStorage.photo;
        $('.imagearea').html(img);

但它不显示图片和我的 img src，如下所示:

<img src="[object ArrayBuffer]">

注意:我知道本地存储文件大小最小为 5 Mb

Answer 1

保存的图像数据是一个 ArrayBuffer，因此我们首先需要创建一个物理图像，然后才能将其附加到 img 标签中。

let arrayBufferView = new Uint8Array( localStorage.photo );
let blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
let urlCreator = window.URL || window.webkitURL;
let imageUrl = urlCreator.createObjectURL( blob );
let img = new Image();
img.src = imageUrl;
$('.imagearea').html(img);