时间戳

首页 > 解决方案 > 来自 localStorage url 的图像返回 [object ArrayBuffer]

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

问题描述

我尝试使用本地存储来加速我的网站加载图像和音频文件，所以我使用 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

标签： javascripthtml

解决方案

保存的图像数据是一个 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);

推荐阅读