Develop Reference

How to convert Base64 string to PNG (currently using Jimp)?

I'm currently creating a real-time chat application. This is a web application that uses node.js for the backend and uses socket.io to connect back and forth.
Currently, I'm working on creating user profiles with profile pictures. These profile pictures will be stored in a folder called images/profiles/. The file will be named by the user's id. For example: user with the id 1 will have their profile pictures stored in images/profiles/1.png. Very self-explanatory.
When the user submits the form to change their profile picture, the browser JavaScript will get the image, and send it to the server:
form.addEventListener('submit', handleForm)
function handleForm(event) {
event.preventDefault(); // stop page from reloading
let profilePicture; // set variable for profile picture
let profilePictureInput = document.getElementById('profilePictureInput'); // get image input
const files = profilePictureInput.files[0]; // get input's files
if (files) {
const fileReader = new FileReader(); // initialize file reader
fileReader.readAsDataURL(files);
fileReader.onload = function () {
profilePicture = this.result; // put result into variable
socket.emit("request-name", {
profilePicture: profilePicture,
id: userID,
}); // send result, along with user id, to server
}
}
I've commented most of the code so it's easy to follow. The server then gets this information. With this information, the server is supposed to convert the sent image to a png format (I can do whatever format, but it has to be the same format for all images). I am currently using the jimp library to do this task, but it doesn't seem to work.
const jimp = require('jimp'); // initialize Jimp
socket.on('request-name', (data) => { // when request has been received
// read the buffer from image (I'm not 100% sure what Buffer.from() does, but I saw this online)
jimp.read(Buffer.from(data.profilePicture), function (error, image) {
if (error) throw error; // throw error if there is one
image.write(`images/profiles/${data.id}.png`); // write image to designated place
}
});
The error I get:
Error: Could not find MIME for Buffer <null>
I've scoured the internet for answers but was unable to find any. I am available to use another library if this helps. I can also change the file format (.png to .jpg or .jpeg, if needed; it just needs to be consistent with all files). The only things I cannot change are the use of JavaScript/Node.js and socket.io to send the information to the server.
Thank you in advance. Any and all help is appreciated.

If you're just getting the data URI as a string, then you can construct a buffer with it and then use the built in fs to write the file. Make sure the relative path is accurate.
socket.on('request-name', data => {
const imgBuffer = Buffer.from(data.profilePicture, 'base64');
fs.writeFile(`images/profiles/${data.id}.png`, imgBuffer);
}

Node JS: Preview downloading images*

I am making a node.js app that will be primarily used to download images from the web. I have created this function that successfully downloads images. I want to make the function also show a live preview of the image as it is downloading without impacting download speed. Is it possible to "tap the pipe" and draw the image as it downloads to a html canvas or img? I am using electron so I am looking for a chromium/node.js based solution.
Edit:
I've also found out you can chain pipes (r.pipe(file).pipe(canvas);) but I'm not sure if that would download the file first and then show up on the canvas or if it would update them both as the file downloads.
I've also thought of creating two separate pipes from the request (var r = request(url); r.pipe(file); r.pipe(canvas);), but I'm not sure if that would try to download the image twice.
I'm also not particularly familiar with the html canvas and haven't been able to test these ideas because I don't know how to pipe a image to a canvas or an img element for display in the application.
const fs = require('fs-extra');
downloadFile(url, filename) {
return new Promise(resolve => {
var path = filename.substring(0, filename.lastIndexOf('\\'));
if (!fs.existsSync(path)) fs.ensureDirSync(path);
var file = fs.createWriteStream(filename);
var r = request(url).pipe(file);
// How would also pipe this to a canvas or img element?
r.on('error', function(err) { console.log(err); throw new Error('Error downloading file') });
r.on('finish', function() { file.close(); resolve('done'); });
});
}

I ended up asking another similar question that provides the answer to this one. It turns out the solution is to pipe the image into memory, encode it with base64 and display it using a data:image url.

Display images from dropbox with javascript api

I'm trying to create a page that could show all pictures in a dropbox folder through the Javascript API.
I was able to set up my dropbox app properly, and I am able to get a list of files.
I'm stuck at the part to get a URL I could actually use to show the picture in HTML. I tried the following code, to try and get the URL for 1 image for the time being:
dbx.filesListFolder({path: ""})
.then(function(response) {
console.log(response);
// ↑ this works!
dbx.filesGetThumbnail({path: response.entries[0].path_display, format: "jpeg", size: "w64h64"})
.then(function(result) {
window.data = result;
console.log(result);
})
// closures and rest of code...
Inspecting the window.data or the console.log(result), I cannot seem to find any URL I could use in my HTML.
Any pointers to head me in the right direction? I'm still new to the Dropbox Javascript API.

Kudos to Greg
The filesGetThumbnail method doesn't itself return a URL for the thumbnail data. It returns the raw thumbnail data directly. If you want a URL to display locally in the browser, you may want to something like this:
dbx.filesGetThumbnail({"path": "/test.jpg"})
.then(function(response) {
var img = document.createElement('img');
img.src=window.URL.createObjectURL(response.fileBlob);
document.body.appendChild(img);
})
.catch(function(error) {
console.log("got error:");
console.log(error);
});
BTW, you can find all of the API v2 JavaScript SDK methods documented here.

For others has the same issue :)
Now Dropbox JS Api returns base64 image data instead, so you need to do something like this:
var img = document.createElement('img');
img.src = "data:image/jpg;base64, " + <data returned>;
data:image/jpg depends on which image type you requested

Doing something after a file has been downloaded

I'm kinda new to programming in general. My problem is that I want to download a file and after that do something.
Danbooru.search(tag, function (err, data) { //search for a random image with the given tag
data.random() //selects a random image with the given tag
.getLarge() //get's a link to the image
.pipe(require('fs').createWriteStream('random.jpg')); //downloads the image
});
now I want to do a console.log after the file has been downloaded. I don't want to work with setTimeout since the files will take a diffrent time to download.
Thanks for the help.

See if this works for you. Just saving the request to a variable and checking for the finish event on it.
Danbooru.search(tag, function (err, data) {
var stream = data.random()
.getLarge()
.pipe(require('fs').createWriteStream('random.jpg'));
stream.on('finish', function() { console.log('file downloaded'); });
});

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