I'm creating an app using node-webkit, so there's a lot of javascript. I have written a node.js function that will take a screen shot and save it to the disk, however, it saves it to the project root dir and I would like to prompt the user to choose a save location, but I cannot find a way to create a save file dialog. Current code:
screen_shot.js:
var fs = require('fs');
exports.buildFile = function(name, value) {
var img = new Buffer(value, encoding='base64');
fs.writeFile(name, img, function(err) {
if(err) {
console.log(err);
} else {
console.log("The file was saved!");
}
});
};
index.html:
...
<script>
var sc= require('screen_shot');
function wait() {
$('#close-popup').click();
setTimeout(function() {screen_shot()}, 10);
}
function screen_shot() {
html2canvas($('body'), {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png").split(',')[1];
var decodedImg = window.atob(img);
sc.buildFile("sc.png", img);
}
});
}
</script>
...
<a href="#" onclick="wait();" data-role="button" data-theme="j">Screen shot</a>
The wait function is just to give the popup I'm using time to close before the screenshot is taken.
I have been reading the node-webkit file dialog doc but it is either not what I'm looking for or I cannot make it work properly.
The File Dialog page in the Wiki mentions a save dialog file input
nwsaveas will open a save as dialog which let user enter the path of a file, and it's possible to select a non-exist file which is different with the default file input tag:
You could use that in an custom dialog like a modal or so to query the user for that input.
Very basic example based on your provided code:
<script>
var fs = require('fs');
var buildFile = function(name, value) {
var img = new Buffer(value, 'base64');
fs.writeFile(name, img, function(err) {
if(err) {
console.log(err);
} else {
console.log("The file was saved!");
}
});
}
function wait() {
$('#close-popup').click();
setTimeout(function() {screen_shot()}, 10);
}
function screen_shot() {
html2canvas($('body'), {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png").split(',')[1];
var decodedImg = window.atob(img);
query_for_save_path(function (save_path) {
buildFile(save_path, img);
alert('Screenshot saved to: ' + save_path);
});
}
});
}
function query_for_save_path(cb) {
$('#dialog').show();
$('#dialog input').one('change', function (event) {
cb($(this).val());
});
}
</script>
<a href="#" onclick="wait();" data-role="button" data-theme="j">Screen shot</a>
<div id="dialog" style="display:none;">
Choose a path to save your shot:
<input type="file" nwsaveas />
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With