I am currently working on a SPA app using Vue js and firebase. My goal is to upload an image, resize it to fixed dimensions, and then upload it to firebase.
To achieve this, I have incorporated the use of the Jimp npm package for resizing the uploaded image.
Below is my implementation:
Main.js
import Jimp from 'jimp';
Window.Jimp = Jimp;
This snippet demonstrates how I handle image uploads:
uploadImage(e) {
if (e.target.files[0]) {
let file = e.target.files[0];
Jimp.read(file)
.then(lenna => {
return lenna
.resize(256, 256) // resize
.quality(60) // set JPEG quality
.write(file.name); // save
})
.catch(err => {
console.error(err);
});
conslole.log(lenna);
var storageRef = fb.storage().ref("products/" + file.name);
let uploadTask = storageRef.put(file);
uploadTask.on(
"state_changed",
snapshot => {},
error => {},
() => {
uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
this.product.images.push(downloadURL);
console.log("File available at", downloadURL);
});
}
);
}
}
While implementing the above code, I encountered the following error message:
No matching constructor overloading was found. Please see the docs for how to call the Jimp constructor.
I would appreciate any assistance in identifying the mistake I may have made in this process.