0

I'm using this library Photo Sphere Viewer to "navigate" through a 360 image. I would like to be able to take a 2d snapshot of the view pressing a button. I read that is not possible to save an image with toDataUrl('image/png') in webgl context after the render in three.js without using preserveDrawingBuffer flag.

This is my small script:

$('#capture').on('click', function(e) {
 e.preventDefault();
 var element = document.getElementsByTagName('canvas')[0];
 var img = element.toDataURL("image/png");
});

This will save a base:64 image. My question is: Is there a workaround without hardcode the library (with preserveDrawingBuffer: true).

I wouldn't change that, mainly because I read that will slower the perfomances.

Thanks in advance

Angus Simons
  • 528
  • 1
  • 5
  • 26
  • Untested but since it uses three.js I guess it uses its rendering loop. So If you wait until the next frame it should work ; `requestAnimationFrame(function(){img= element.toDataURL(); doSomethingWith(img);})` – Kaiido May 22 '17 at 23:23
  • See [this SO answer](https://stackoverflow.com/a/30647502/1461008). – WestLangley May 22 '17 at 23:27
  • @Kaiido Unfortunately this doesn't work. I would get the snapshot when the image is already rendered – Angus Simons May 23 '17 at 08:08
  • @WestLangley the library has a render method, but also if I call it inside the click event when I use `var screenshot = renderer.domElement.toDataURL();` It throws `can't find variable renderer`. I think because it's a method of the plugin not the `render()` function of three.js – Angus Simons May 23 '17 at 08:12
  • Then I guess you need to fix your code. – WestLangley May 23 '17 at 08:27
  • @WestLangley so I have to hardcode the plugin I'm using? – Angus Simons May 23 '17 at 08:28
  • Sorry, I have no idea what you are doing. Your question was about the use of _preserveDrawingBuffer_, and as the link explained, you do not need to set it to `true` to take a screenshot. – WestLangley May 23 '17 at 08:32
  • @WestLangley thanks mate, I understand isn't totally clear, btw you help me solving my problem. I put `var screenshot = renderer.domElement.toDataURL();` and `return screenshot;` inside the prototype object in the plugin and it works without preserveDrawingBuffer – Angus Simons May 23 '17 at 08:36

0 Answers0