# Load an image from local storage in phaser 2/CE

**URL:** <https://phaser.discourse.group/t/load-an-image-from-local-storage-in-phaser-2-ce/150>\
**Category:** Phaser 2 / CE\
**Created:** [December 8, 2018, 7:37pm UTC](https://phaser.discourse.group/t/load-an-image-from-local-storage-in-phaser-2-ce/150 "2018-12-08T19:37:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![baambooli](https://avatars.discourse-cdn.com/v4/letter/b/d78d45/32.png) [@baambooli](https://phaser.discourse.group/u/baambooli)\
**Post date:** [December 8, 2018, 7:37pm UTC](https://phaser.discourse.group/t/load-an-image-from-local-storage-in-phaser-2-ce/150/1 "2018-12-08T19:37:10Z")

</div>

Hello,  
Is it possible to load an image in phaser 2 from browser local storage?  
supposing that we have saved the image using this command in localstorage

```javascript
localStorage.setItem('myImage', 'base64 encoded string representing the PNG image');

```

how can I load it in phaser2? I tried this code but it does not work:

```javascript
game.cache.addImage('img', null, localStorage.getItem('myImage'));
var image = game.add.image(0, 0, 'img');

```

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![netgfx](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/netgfx/32/17_2.png) [@netgfx](https://phaser.discourse.group/u/netgfx)\
**Post date:** [December 11, 2018, 12:06pm UTC](https://phaser.discourse.group/t/load-an-image-from-local-storage-in-phaser-2-ce/150/2 "2018-12-11T12:06:03Z")

</div>

I think you have to load it into cache first try

```javascript
var loader = this.load.image("img", localStorage.getItem('myImage'));
loader.addOnce("onLoadComplete", function(){
   var image = game.add.image(0, 0, 'img');
});

```

or do the whole `this.load.image("img", localStorage.getItem('myImage'));` on the `preload` state of the current state, then on the `create` function you should be able to load it normally with the `img` key.

---

<div class="post-metadata">

**Author:** ![baambooli](https://avatars.discourse-cdn.com/v4/letter/b/d78d45/32.png) [@baambooli](https://phaser.discourse.group/u/baambooli)\
**Post date:** [December 12, 2018, 12:36am UTC](https://phaser.discourse.group/t/load-an-image-from-local-storage-in-phaser-2-ce/150/3 "2018-12-12T00:36:06Z")

</div>

> [@netgfx](#):
>
> var loader = this.load.image(“img”, localStorage.getItem(‘myImage’)); loader.addOnce(“onLoadComplete”, function(){ var image = game.add.image(0, 0, ‘img’); });

Thanks for response, but it does not work. As a reminder in localStorage we have base64 encoded contents of image (that has been taken from camera of cell phone using cordova) not URL of image.

---

<div class="post-metadata">

**Author:** ![artvinn](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/artvinn/32/155_2.png) [@artvinn](https://phaser.discourse.group/u/artvinn)\
**Post date:** [December 12, 2018, 6:23am UTC](https://phaser.discourse.group/t/load-an-image-from-local-storage-in-phaser-2-ce/150/4 "2018-12-12T06:23:43Z")

</div>

Try like that:

```javascript
let image = new Image()
image.src = localStorage.getItem('myImage')

game.cache.addImage('img', null, image)

```

---

<div class="post-metadata">

**Author:** ![netgfx](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/netgfx/32/17_2.png) [@netgfx](https://phaser.discourse.group/u/netgfx)\
**Post date:** [December 12, 2018, 8:49am UTC](https://phaser.discourse.group/t/load-an-image-from-local-storage-in-phaser-2-ce/150/5 "2018-12-12T08:49:15Z")

</div>

maybe this will help [http://jsfiddle.net/danthewolfe/6ja1kw32/](http://jsfiddle.net/danthewolfe/6ja1kw32/) base64 needs slightly different syntax

---

<div class="post-metadata">

**Author:** ![baambooli](https://avatars.discourse-cdn.com/v4/letter/b/d78d45/32.png) [@baambooli](https://phaser.discourse.group/u/baambooli)\
**Post date:** [December 13, 2018, 1:46am UTC](https://phaser.discourse.group/t/load-an-image-from-local-storage-in-phaser-2-ce/150/6 "2018-12-13T01:46:40Z")

</div>

Thanks you very much artvinn. you code works perfect. I was working on that for 2 days with no chance.

---

<div class="post-metadata">

**Author:** ![baambooli](https://avatars.discourse-cdn.com/v4/letter/b/d78d45/32.png) [@baambooli](https://phaser.discourse.group/u/baambooli)\
**Post date:** [December 13, 2018, 2:02am UTC](https://phaser.discourse.group/t/load-an-image-from-local-storage-in-phaser-2-ce/150/7 "2018-12-13T02:02:46Z")

</div>

your second suggestion is completely correct too netgfx. thanks