This forum is read only and just serves as an archive. If you have any questions, please post them on

8 years ago by Donzo

Hello again:

I have been pulling my hair out about this issue.

I am using this awesome image picker class to pull an image off the user's phone.

It works great, but I want to store the photo that the user has selected.

I am attempting to do it like this:

1. Draw the image:

ctx.drawImage(this.myImage, this.myImageDx, this.myImageDy, this.myImageDw, this.myImageDh);

2. Get the image data:

this.myImageData = ctx.getImageData(this.myImageDx,this.myImageDy,this.myImageDw,this.myImageDh);

3. Stringify the image data:

this.u1ImageString = JSON.stringify( this.myImageData );

4. Store the string:

localStorage.setItem("u1myImage", );

5. Retrieve the string and parse it:

this.u1MyPic = JSON.parse(localStorage.getItem("u1myImage", ));	

6. Put the image in the desired location:

ctx.putImageData(this.u1MyPic , this.myImageDx, this.myImageDy, this.myImageDw, this.myImageDh);

It all works great until the last step. For some reason, putImageData will not display the image regularly. Sometimes the image may flicker briefly, but it is not appearing as it should.

Here are the things that I've tried:

1. I read this github thread. I set .retinaResolutionEnabled and imageSmoothingEnabled to false. This did not help.

2. I tried using the getImageDataHD and putImageDataHD methods instead. The image still did not draw.

3. I tried removing all scaling of the images. It did not make a difference.

4. I tried running the game at a reduced frame rate. It did not matter.

I have reached the limits of my abilities and now turn to others for help.
How can I store an image and later retrieve it?

Thank you in advance for your consideration.

8 years ago by Donzo

Still having problems...

Going to try using an offscreen canvas.

8 years ago by Joncom

For some reason, putImageData will not display the image regularly. Sometimes the image may flicker briefly, but it is not appearing as it should.
Sounds like you're mostly working. The thing with drawing though, is that you have to do it on every frame. Are you drawing it every frame? Or just once, when you first retrieve it?

8 years ago by Donzo

Thanks Joncom.

I am running the call every frame.
I have tried using an offscreen canvas,
but I can't seem to use stored image data in the way that I want,

even when I do things like:

//Remove data from image object
this.myImageDataData = ctx2.getImageData(0,0,thewidth, theheight).data;


//Reattach Data to new image object;

I guess I will play with toDataURL() and see if it yields better results...

8 years ago by Donzo

I was finally able to work around this issue by using toDataURL like such:

//Draw image to separate canvas:
var myOffscreen = document.createElement('canvas');
myOffscreen.width =;
myOffscreen.height =;
var ctx2 = (myOffscreen.getContext('2d'));
ctx2.drawImage(, 0, 0);
var thewidth =;
var theheight =;

//Save image to local storage as data url
localStorage.setItem("u1myImage", myOffscreen.toDataURL());	

//Create new image object using the retrieved data string:
this.userImageObj = new Image();
this.userImageObj.src = localStorage.getItem("u1myImage", );

//Draw the image object (in a separate function)
ctx.drawImage(this.userImageObj, this.myImageDx, this.myImageDy, this.myImageDw, this.myImageDh);

Thanks for thinking about this with me, Joncom.
Page 1 of 1
« first « previous next › last »