I am new to three js. Now I am using following script for saving the screen snap as jpeg file.
var camera, scene, renderer;
var mesh;
var strDownloadMime = "image/octet-stream";
init();
animate();
function init() {
var saveLink = document.createElement('div');
saveLink.style.position = 'absolute';
saveLink.style.top = '10px';
saveLink.style.width = '100%';
saveLink.style.color = 'white !important';
saveLink.style.textAlign = 'center';
saveLink.innerHTML =
'<a href="#" id="saveLink">Save Frame</a>';
document.body.appendChild(saveLink);
document.getElementById("saveLink").addEventListener('click', saveAsImage);
renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(200, 200, 200);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
Now I need to save image to a specific location for restoring that when I need. How to do that?, Please help me!!!
It seems your posted code is incomplete e.g. saveAsImage() is missing. Besides, consider to share a live example with your code.
Sorry @Mugen87, I didn’t use that saveAsImage . But it is working. There may be another way you known with the location option. Please share sample code for my need.!!
I guess your post refers on this stackoverflow thread, right?
This is not possible. The only thing you can do is to force a “Save as Dialog”. However, you can’t do this at the client with JavaScript. You have to set special HTTP response header and that works only from the server-side.
There is a non-standard JS API for client-side file storage in a sandboxed file system: FileSystem - Web APIs | MDN I am not sure of its limits, though. And cookies. Maybe you can even save the image as an objectURL in the cookie. (I doubt that will work…)
Regarding forcing “Save as…”, the case may be (I have not checked) similar as that for forcing “Browse…”. A browse must be triggered by user action. You can’t fake-click a file input from any code, but you can fake-click it from another click handler, as here.
It’s not a good idea to recommend such APIs to an unexperienced user, especially if you are not aware of their limits.
I did not recommend it, I just mentioned it, in the context that you said it is impossible. I have edited my comment to emphasize “non-standard”. It is supported by both Chrome and Firefox, though, so pretty surely on the way in, not out (but subject to modifications before becoming a standard).
Have you worked with it before?
No, I managed to avoid it. 
That is not to say I will discourage others from considering it and from spending some time on learning its capabilities and limitations, if they think they really need client-side file storage.
From MDN:
This interface will not grant you access to the users filesystem.
The OP needs to save the screenshot to a specific location. Against this backdrop, the API might not be a good choice.
No, you’re right. But on the other hand, people don’t always know what they need. Maybe a virtual file system is that thing, because it allows a much smoother workflow for restoring the previous session. But anyway, it does not answer the OP’s question.
I didn’t use that saveAsImage . But it is working.
@jaya_kannan saveAsImage is specified as the click handler for the save link, so if it is working, that crucial piece of code must have been defined somewhere.
Perhaps it will help you to know that it is possible to make a download link with a given filename. You can do something like this (adapted from another application, but not tested like this):
function clickHandler(event) {
let link = document.createElement("a");
link.href = renderer.domElement.toDataURL("image/octet-stream");
/* link.download could also be altered by a global counter or by event.target.id,
if you apply this handler to multiple buttons/links. */
link.download = "MySnapshot.jpg";
/*I think the following line is added to avoid losing the current tab.
I am afraid on some browsers it will open a new tab/window even
though it is a download link. I suggest trying with and without it.*/
link.target = "_blank";
link.click();
}
saveLink.addEventListener("click", clickHandler);
PS: GitHub - eligrey/FileSaver.js: An HTML5 saveAs() FileSaver implementation provides “Save as…”. I have never tried it, though.
What will happen, if I given some path or location for link.target instead of “_blank”. and if it is not possible then please give me a sample code for open the directory while click on save button to select the save location by user.
Yes @Mugen87 you are right. I am using the same code which is mentioned in that thread on stackoverflow. But through that, we can save the file to default path location of browser only. But I need to store file to folder which is required by user
link.target is the GUI target (e.g. a frame, or “_blank”, which historically opens a new window, now typically a new tab). The link path is set in link.href. But the save path cannot be altered with this method, as far as I know. You could try prepending it to link.download, but I guess it will not work at all, or work only if the directory structure is already in your default downloads folder.
1 Like
Thanks for your kind reply @EliasHasle . So if I give a storage path to link.href, the file will be saved in that location. right?
Most likely not, but a file name may work.
1 Like
If it is not possible, then is it possible to open the directory. for selecting the location dynamically? @EliasHasle
You can try GitHub - eligrey/FileSaver.js: An HTML5 saveAs() FileSaver implementation . I don’t know any more. You will be the expert afterwards. 
1 Like
@Mugen87, do you know anything related to this?