Forums » Help » Ejecta getImageData() and putImageData() Problem

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", ig.game.u1ImageString );

5. Retrieve the string and parse it:

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

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.

Still having problems...

Going to try using an offscreen canvas.

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?

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;

and

##
//Reattach Data to new image object
this.stillMoreDataObject.data.set(this.u1MyPic);
##

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

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 =  ig.game.myImage.width;
myOffscreen.height = ig.game.myImage.height;
var ctx2 = (myOffscreen.getContext('2d'));
				
										
ctx2.drawImage(ig.game.myImage, 0, 0);
var thewidth = ig.game.myImage.width;
var theheight = ig.game.myImage.height;

//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", ig.game.u1ImageString );

//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.