Canvas screenshot is taken upsidedown

[deedeekaka]

Hola!

I wanted to take a screenshot of my game and download it to the user's device. I have this working, almost except that on my iPhone5s in Safari, the downloaded image is upsidedown. To get the screen shot I use my code below (specifically, the toDataURL() function). On my desktop, the downloaded image is oriented the right way. But not in Safari mobile. I don't have Safari Desktop to try it there, so I'm not sure if mobile vs. desktop makes a difference.

Has anyone dealt with this? Know of any work arounds? Thank you in advance!

saveCanvas : function () {
		
	var link = document.createElement('a');
	link.href = this.game.canvas.toDataURL('image/png');
	link.download = 'Highscore.jpg';
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);  
		
}

 

[mattstyles]

There's an open pixi issue here, sounds like the same issue.

My guess would be to do with coordinate systems, @ivan.popelyshev care to elaborate on your thoughts as to why? Or playing it close to your chest until you have more info?  

[ivan.popelyshev]

If that happens only on iPhones, then i really dont know what is going on  I need an iphone for that.

[deedeekaka]

2 minutes ago, ivan.popelyshev said:

If that happens only on iPhones, then i really dont know what is going on  I need an iphone for that.

Not sure if it only happens in iPhones, but I only have an iPhone mobile device on me right now!

[ivan.popelyshev]

Ok, I'll try to look around

[deedeekaka]

10 minutes ago, mattstyles said:

There's an open pixi issue here, sounds like the same issue.

My guess would be to do with coordinate systems, @ivan.popelyshev care to elaborate on your thoughts as to why? Or playing it close to your chest until you have more info?  

Yes, I've seen that one! It's exactly the same in mine. If I use Phaser.CANVAS.. it's totally fine, but WEBGL flips it.

[mattstyles]

I found a test case somewhere else, its not just mobile safari, desktop safari is flipping us all the bird as well.

I found an old issue via bugzilla as well, although it was resolved over 5 years ago, same issue though.

My 2nd possible solution was going to suggest a hardware issue but thats a huge stretch and given that I seem to be getting the same issue on desktop it isn't that.

I'm still leaning towards coordinate system, no idea how to proceed to really test it. Would have to do some research and have a good reproducible test case.

Have you tried with an older version of the OS? Just wondering if this is a new issue or if its been around for a while, I had a cursory look at Apple's bug reports but didnt find anything (not saying there isn't one though, I didn't look for long).

[deedeekaka]

1 hour ago, mattstyles said:

I found a test case somewhere else, its not just mobile safari, desktop safari is flipping us all the bird as well.

I found an old issue via bugzilla as well, although it was resolved over 5 years ago, same issue though.

My 2nd possible solution was going to suggest a hardware issue but thats a huge stretch and given that I seem to be getting the same issue on desktop it isn't that.

I'm still leaning towards coordinate system, no idea how to proceed to really test it. Would have to do some research and have a good reproducible test case.

Have you tried with an older version of the OS? Just wondering if this is a new issue or if its been around for a while, I had a cursory look at Apple's bug reports but didnt find anything (not saying there isn't one though, I didn't look for long).

Haven't tried an older OS, but I am on iOS 9 which is pretty recent.

You can try the game out if you have Safari and you can see it prints upside down. I've set it that if your current score is >= your highscore and you miss a shot (it's a basketball game), that it will auto download a screenshot.

http://www.dev.applications.ene.gov.on.ca/games/bball/ 

[ivan.popelyshev]

2 hours ago, deedeekaka said:

Yes, I've seen that one! It's exactly the same in mine. If I use Phaser.CANVAS.. it's totally fine, but WEBGL flips it.

you mean, that's Pixi-v2?

[deedeekaka]

2 hours ago, ivan.popelyshev said:

you mean, that's Pixi-v2?

maybe over exaggerated a bit, but I meant same symptoms and root of problem being the WebGL and Safari