Question

我尝试使用本地存储来加快网站加载图像和音频文件的速度，所以我用这样的Java脚本设置了我的Pic文件：

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

但它不会像这样显示Pic和我的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);

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

1 个答案: