CODEWITHSUNDEEP
firebaseimagemagickfirebase-storage
Sergio Flores
Sergio Flores

Reputation: 5427

Resize an image before uploading it to firebase

Firebase storage looks very cool and easy to use, but I'm wondering if there's a way to resize an image before uploading it to Firebase Storage, e.g., run a proccess using ImageMagick in a server and then run the uploading process using Firebase SDK but I notice there aren't storage functions for Firebase SDK Server.

Upvotes: 15

Views: 12828

Answers (3)

Juan Carlos Ibarra
Juan Carlos Ibarra

Reputation: 1419

You could also use Firebase Storage + the official Firebase Resize Image extension: https://firebase.google.com/products/extensions/firebase-storage-resize-images. The downside here is that "To install an extension, your project must be on the Blaze (pay as you go) plan". Bc basically what it will do is spin up a Firebase Function App for you, and it'll get triggered every time you upload a file to the path you specify. You can configure things like the desired size as well as the format or if you want to keep a copy of the original file or not. Good thing you won't need to worry about the underlying implementation.

Upvotes: 0

DavidTaubmann
DavidTaubmann

Reputation: 3360

Resize using JavaScript Client-Side-Processing

We're using JavaScript resizing, which uses clients device processing power to resize the image, and works GREAT, saving us space and money, saving the netwrok unnecesary bandwidth, and saving the client a bunch of time and also money in most mobile cases.

The original script we are using came from here, and the procedure to use it is as simple as this:

<input type="file" id="select">
<img id="preview">
<script>
document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};
</script>

I believe that guy (dcollien) deserves a LOT of merit, so I would recommend you to vote his answer up.

Upvotes: 7

Mike McDonald
Mike McDonald

Reputation: 15963

You can also use Firebase Storage + Google Cloud Functions to upload an image, resize the image (using ImageMagick or similar), and write it back to Firebase Storage.

I have an example using these together here (though I trigger the Cloud Vision API, rather than an image resizer).

A quick side note: Firebase Storage doesn't have a Node.js client, instead we recommend using the GCloud-Node library.

Upvotes: 16

Related Questions