You are not logged in.

Generate snapshot of current view serverside

copenhagenjoe

Beginner

  • "copenhagenjoe" started this thread

Posts: 4

  • Send private message

1

Saturday, March 12th 2016, 8:39pm

Generate snapshot of current view serverside

Long time listener, first time poster!

We’d like to create an html5 plugin that runs a serverside script that recreates the users current view from the source pano image. Ideally we’d like to reference the tiles the user is looking at (multires) instead of having to reference and process the entire pano image for such a small thumbnail. This way we can control the output size of the image centered around the point they're looking at in the pano, regardless of their browser size.


The ecard plugin works nice, but we’d like to abstain entirely from using flash and get around the performance bottlenecks of using the canvas image for the snapshot. It seems ipads and some phones have performance limitations and are just showing a black image when we use the client size snapshot of the canvas, plus we're at the mercy of their browser size for the final image


Where we're lost is how to reference the current ath and atv within the tiles that the user is currently looking at, as well as what tiles they are looking at when they request the snapshot.




Or is there a way we can limit the resolution when they request the snapshot, then put the resolution back after the image is done? We're using canvas's built in toDataURL function currently.


Hopefully some of the big guns can provide some wisdom...Klaus, Tuur, Sacha, VN, Michel, Jarreda, Sudarchikov? *love*

This post has been edited 1 times, last edit by "copenhagenjoe" (Mar 12th 2016, 8:56pm)

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

2

Saturday, March 12th 2016, 9:02pm

"Or is there a way we can limit the resolution when they request the snapshot, then put the resolution back after the image is done? We're using canvas's built in toDataURL function currently."

What do you mean exactly?

You can translate all the tiles for a particular level back into a full size panoramic image and export a rectalinear snap shot based on the ath,atv, and fov.
If you figure out the math to place each image precisely.
Definitely doable with panotools or maybe krpanotools itself ( I haven't checked).
Probably easy to just have 6 psbs/jpgs for cube faces to stitch from. Stitching straight tiles won't work since they are cubeface pieces, not images taken from a single perspective.

Yeah older iphones and ipads, tend to return black when they run out of memory.

Personally, I just went the canvas route.. but maybe I'll get time to take a look at restitching tiles again since it will always work.
I've seen some server side solutions already implemented. Whether it was from tiles or a psb, I'm not sure. They didn't have very good input sanitization, I know that. ;)
A full size psb should be straight simple to script out but then you need double disk space for each image.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

This post has been edited 1 times, last edit by "sachagriffin" (Mar 12th 2016, 9:22pm)

copenhagenjoe

Beginner

  • "copenhagenjoe" started this thread

Posts: 4

  • Send private message

3

Saturday, March 12th 2016, 9:38pm

Quoted from "sachagriffin"

What do you mean exactly?
I guess I don't really know! Was hoping there was a way to hack the resolution temporarily to get around black screens. I guess not possible!

Quoted from "sachagriffin"

You can translate all the tiles for a particular level back into a full size panoramic image and export a rectalinear snap shot based on the ath,atv, and fov.
If you figure out the math to place each image precisely.
Definitely doable with panotools or maybe krpanotools itself ( I haven't checked).
Probably easy to just have 6 psbs/jpgs for cube faces to stitch from. Stitching straight tiles won't work since they are cubeface pieces, not images taken from a single perspective.
By panotools do you mean the panorama tools that ptgui is based on? Haven't used those on their own before, do you know of any good documentation of translating the krpano ath/atv/fov to points within cubefaces or original image? So take the original psd and generate cubefaces, and use those to stitch. I would think if a user is being displayed 10 tiles 4 levels down, they'd be the same viewpoint, but this is not so?

Quoted from "sachagriffin"

Yeah older iphones and ipads, tend to return black when they run out of memory.
you're exactly right, this is the problem we're running into!

Quoted from "sachagriffin"

Personally, I just went the canvas route.. but maybe I'll get time to take a look at restitching tiles again since it will always work.
I've seen some server side solutions already implemented. Whether it was from tiles or a psb, I'm not sure. They didn't have very good input sanitization, I know that. ;)
A full size psb should be straight simple to script out but then you need double disk space for each image.
You have a working version of this already? Do you just use some sort of fallback image to display if the user is on an older ipad or another affected device? We haven't tried doing anything from the original psd, but it seems this would be pretty resource heavy.

Sudarchikov Andrey

Professional

Posts: 1,082

Location: Russia, Kaliningrad

  • Send private message

4

Sunday, March 13th 2016, 12:31am

Well, an suggestion from Klaus.
you could make 'screenshots' (e.g. by
loading an additional viewer with the wanted size into a internally
hidden element and making the screenshot there):

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<action name="makescreenshot" type="Javascript"><![CDATA[
  if (krpano.webGL &&
krpano.webGL.context.getContextAttributes().preserveDrawingBuffer)
  {
    try
    {
       var img_src = krpano.webGL.canvas.toDataURL();
       ...
    }
    catch(err)
    {
       krpano.trace(3,err);
    }
  }
  else
  {
    krpano.trace(3,"no webgl or no preserveDrawingBuffer");
  }
]]></action>


Hope it can help, i think the same way as sachagriffin said

regards
Andrey
VRAP - desktop VR content player based on krpano.
Common tasks in one place in one click! Discussion thread
DOWNLOAD for MAC
DOWNLOAD for WIN

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

5

Sunday, March 13th 2016, 3:49pm

Nice andrey. I hadn't thought of that. Honestly though, I haven't even noticed a performance decrease to preserve drawing buffer.

ptgui used to be a gui for panorama tools. Now it uses its own internal engine based on it.
for the most part krpanotools can handle the output via the command line just fine. The headache of potentially being dossed via this process led me to push toward the canvas method.

The last SuperBowl 50 virtual tour has my implementation using a fallback image indeed.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

phatton

Beginner

Posts: 9

  • Send private message

6

Wednesday, April 6th 2016, 10:47am

Hi guys,

Thanks for this thread. It's really helpful.

Once the image is loaded into img_src do you have any ideas for how to then use it?

Ideally I'd like to be able to copy it to the clipboard or share it via Facebook/Twitter.

Any help would be great please.

panomaster

Intermediate

Posts: 297

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

  • Send private message

7

Thursday, April 7th 2016, 12:24am

Andrey, any working example? I always have black screen.
Leszek Cuper
Panoramy 360
Wirtualne spacery

Tuur

Sage

Posts: 3,839

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

8

Tuesday, May 10th 2016, 10:51am

Hi,

This works great..
but when i want to use the data url inside the krpano project i get this error in Safari :

loading error: data:image/jpeg;base64,/9j/4AAQSkZJR

in chrome it works..
Is there a fix or work around??

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Timescale

Trainee

Posts: 120

Location: Netherlands

Occupation: Archaeologist, Timescale R&D

  • Send private message

9

Tuesday, May 10th 2016, 5:39pm

Quoted from "phatton"

Once the image is loaded into img_src do you have any ideas for how to then use it?
You could use a form to send the data to a server side process with, for instance, PHP. You could then store the file on the server or you could open the image in the browser.

the form would look something like this :

Source code

 
1
2
3

<form name="imageForm" id="imageForm" action="./lib/screenshot.php" method="POST" target="_blank">
	<input type="hidden" name=imageData id="imageData">
</form>


you can fill the input element and submit it from the KRpano action with something like this :

Source code

 
1
2

document.getElementById('imageData').value = img_src;
		document.imageForm.submit();


on the receiving side, a method for opening the image would look like this :

Source code

 
1
2
3
4
5
6
7

<?php
$imageDataPost = $_POST['imageData'];
$imageData =  substr($imageDataPost,strpos($imageDataPost,",")+1);

header('Content-type: image/JPEG');
echo base64_decode($imageData);
?>


If you want to save it server side, then you simply write "base64_decode($imageData)" to a file and perhaps target the form to an iframe instead of _blank.

Quoted from "Tuur"

but when i want to use the data url inside the krpano project i get this error in Safari :

loading error: data:image/jpeg;base64,/9j/4AAQSkZJR
I tried various versions of safari (Snow leopard to El Capitan and IOS 9, and none yield an image. It's either black/white or corrupt. It works in FF and Chrome. The safari data does contain the correct dimensions, but it's not a capture of the buffer.
This seems to be an ongoing issue with webkit and webGL canvas.

Similar threads