Develop Reference

Javascript not saving all images at once

So, this is my problem. I am trying to save all the images in the local drive from Javascript and the code that does that looks like this:
window.onload = function () {
console.log(" IN ON LOAD FUNCTION ")
for (filename=1; filename<=80; filename++)
{
console.log(filename)
html2canvas(document.querySelector(`.lead${filename}`)).then(canvas => {
canvas.toBlob(function(blob) {
saveAs(blob, `${filename}.png`);
});
});
}
}
So the code is quite clear. I have about 80 divs with different class name and I am extracting the text from it and saving it as canvas and downloading that canvas as png format, but the problem is sometimes it downloads about 10 images, and sometimes it doesn't download at all. Any help regarding this issue? Any other way around?

How to download entire website from inside the website

I'm making a website, in which I want to offer the user to download the whole website (CSS and images included) for them to modify. I know I can download individual resources with
Click Me
but like I said, this only downloads one file, whereas I would like to download the entire website.
If it helps you visualise what I mean: in chrome, IE and Firefox you can press ctrl+s to download the entire website (make sure you save it as Web page, Complete.
Edit: I know I can create a .zip file that it will download, however doing so requires me to update it every time I make a change, which is something I'd rather not do, as I could potentially be making a lot of changes.

As I mention, it is better that you will have a cron job or something like this that once in a while will create you a zip file of all the desired static content.
If you insist doing it in javascript at the client side have a look at JSZip .
You still have to find a way to get the list of static files of the server to save.
For instance, you can create a txt file with each line is a link to a webpage static file.
you will have to iterate over this file and use $.get to get it's content.
something like this:
// Get list of files to save (either by GET request or hardcoded)
filesList = ["f1.json /echo/jsonp?name=1", "inner/f2.json /echo/jsonp?name=2"];
function createZip() {
zip = new JSZip();
// make bunch of requests to get files content
var requests = [];
// for scoping the fileName
_then = (fname) => data => ({ fileName: fname, data });
for (var file of filesList) {
[fileName, fileUrl] = file.split(" ");
requests.push($.get(fileUrl).then(_then(fileName)));
}
// When all finished
$.when(...requests).then(function () {
// Add each result to the zip
for (var arg of arguments) {
zip.file(arg.fileName, JSON.stringify(arg.data));
}
// Save
zip.generateAsync({ type: "blob" })
.then(function (blob) {
saveAs(blob, "site.zip");
});
});
}
$("#saver").click(() => {
createZip();
});
JSFiddle
Personally, I don't like this approach. But do as you prefer.

node.js - How to chain download many images from a url

Basically, I want to download a large amount of images from an image service. I have a very large JSON object with all of the URLs (~500 or so) in that JSON object. I tried a few npm image downlader packages as well as some other code that did each image downloading all at the same time; however, about 50% of the downloaded images had data loss while downloaded (a large portion of the image was transparent when viewed). How can I download each image, one after another (waiting until the last one is complete before starting the next) to avoid the data loss?
Edit: here is the relevant code, using request:
var download = function(url, dest, callback){
request.get(url)
.on('error', function(err) {console.log(err)} )
.pipe(fs.createWriteStream(dest))
.on('close', callback);
};
links.forEach( function(str) {
var filename = str[0].split('/').pop() + '.jpeg';
console.log(filename);
console.log('Downloading ' + filename);
download(str[0], filename, function(){console.log('Finished Downloading ' + filename)});
});
My links JSON looks like this:
[["link.one.com/image-jpeg"], ["link.two.com/image-jpeg"]]

Okay, so first thing first :
I really do not believe that downloading those 500+ images will all start at once. The V8 engine (kind of the nodejs code executor) actually manages a reasonable number of threads and reuse them to do the stuff. So, it wont create "lots of" new threads, but will wait for other threads to get done.
Now, even if it was all starting at once, I don't think the files would get damaged. I the files were getting corrupt, you wouldn't have been able to open those files.
So, I am pretty sure the problem with the images is not what you think.
Now, for the original question, and to test if I am wrong, you can try to download those files in a sequence like this :
var recursiveDowload = function (urlArray, nameArray, i) {
if (i < urlArray.length) {
request.get(urlArray[i])
.on('error', function(err) {console.log(err)} )
.pipe(fs.createWriteStream(nameArray[i]))
.on('close', function () { recursiveDownload (urlArray, nameArrya, i+1); });
}
}
recursiveDownload(allUrlArrya, allNameArray, 0);

Since you are doing large number of downloads, try Aria2c. Use Aria2 documentations for further details.

Return url from attachment PouchDB

I am trying to create a Webpage with CouchDB and PouchDB. At the beginning I created a CouchDB Database ('image'). In this Database is one document with several attachments, all images (.png). I was able to sync the CouchDB database with PouchDB. Now I want to use the attachments stored in PouchDB.
I used the db.get statement to get the attachments.
db.get('image', {attachments: true}).then(function (doc) {
console.log(doc);
});
Now I want to get the different images because I need them as src at a different place. At the moment I am using:
db.getAttachment('image', 'image1.png').then(function (blob) {
var url = URL.createObjectURL(blob);
console.log('URL image1 created');
}).catch(function (err) {
console.log('URL image1 not created');
console.log(err);
});
The problem is that I don't know how to access the created url. I guess I have to use return and work with a global variable. But I don't know how to do this in this context.
I used the following guide but, as I said, I want to use the url somewhere else in the code.

Part of the solution
The problem seems to be that the url is generated after the img tag tries to access the url. Which means that even if you are working with global variables you get an error. Therefore I changed the order.
Now the src is updated after the url was generated. The problem is still that it is kind of complicated and not really useful in case you are working with several attachments. I still would prefer to get the url for further use.
<body>
<img id ="test" alt="Image from DB" style="width:304px;height:228px;">
<script>
var url = " ";
var imageFW = db.getAttachment('image', 'image1.png');
imageFW.then(function (blob) {
url = URL.createObjectURL(blob);
document.getElementById("test").src = url;
}).catch(function (err) {
console.log(err);
});
</script>
Update:
At the end I solved the problem working with promises

Meteor Collectionfs, how to save all images

I want to save all my images in a imageStore, saving, uploading and so on works fine, just this "little" problem. With this code, i go through all images and want to save them.
jQuery('img').each(function () {
FS.Utility.eachFile(event, function(file) {
Images.insert(file, function (err, fileObj) {
});
});
});
The Problem, I'm getting all images as an image, not as a file but the insertion method need files. So how can i convert my image to a file ?