I am able to get a screenshot of the player in WebGL mode, but I am unable to in CSS-transforms mode. (Mobile/iOS)


I have tried the JavaScript library, 'html2canvas', but it soes not work when the Pano Player is in CSS mode.



Is there ANY way to do this?

Zitat von »klaus.krpano«

Zitat von »robotpano«

Is there ANY way to do this?

So far I know there is no Javascript-possibility to take screenshots of HTML elements.

One possibility might be using a server-side script that uses the krpano tools to create a view from the source pano image...

Best regards,
Klaus

Thank you very much for the reply! It sounds like the next version of krpano will support WebGL on iOS. If true, then this may solve the problem! It is being released soon, correct?

Thank you for the reply, Klaus! :)


I have confirmed that iOS is using WebGL. I did this by looking at the Krpano console.

However, I seem to be unable to get a screen shot of the krpano player in iOS, using html2canvas.

UPDATE:

1. I CAN get a screenshot from a WebGL canvas in iOS, using canvas.toDataUrl(), as described here: http://stackoverflow.com/questions/15558418/how-do-you-save-an-image-from-a-three-js-canvas


I have made a demo: (Click or tap on the WebGL frame to see a 'screenshot' image element appear)
http://jsfiddle.net/kh64cvwg/25/


Note: The above demo uses three.js. It also uses the 'preservedrawingbuffer' parameter.


2. I am still unable to get a screenshot from a WebGL Krpano player on iOS.

I have tried:

- html2canvas

- I have also tried using canvas.toDataUrl() on Krpano's canvas element.

Result:

- On desktop browsers, canvas.toDataUrl() creates a correct screenshot image element.
- on iOS 8 Safari, with Krpano reporting WebGL as the renderer, the resulting screenshot image element is simply black.

I am also sending the canvas.toDataUrl() data to a php script, which creates a jpg file. The result is the same: Good image on desktop browsers, black image on iOS 8 Safari.

Notes:

I am using html5:"only+webgl+preservedrawingbuffer"

	Quellcode
1	embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"only+webgl+preservedrawingbuffer", passQueryParameters:true});

Krpano canvas.toDataUrl() demo: (Instructions: The left hotspot shows the console. The right hotspot takes a screenshot)
http://198.177.118.57/im/webgl - Copy/klaus.html




Any ideas, Klaus?