CODEWITHSUNDEEP
javascripthtml
abdol-hamid Hosseiny
abdol-hamid Hosseiny

Reputation: 132

image from localStorage url return [object ArrayBuffer]

i try using local storage for speed up my site to load image and audio file, so i set my Pic File with java Script like this:

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

in other page i use this code to return my file

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

but it don`t show Pic and my img src like this:

<img src="[object ArrayBuffer]">

note: i know local storage file size most lesser 5 Mb

Upvotes: 0

Views: 911

Answers (1)

Max Gaurav
Max Gaurav

Reputation: 1913

The image data being saved is an ArrayBuffer hence we would first need to create a physical image before we can append it in the img tag.

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

Upvotes: 2

Related Questions