how to resize image before saving to firebase storage

Question

I upload and save uploaded file to firebase database using this code.

html

 <input type="file" accept="image/*"  onchange="showMainImage(this)" />
  <div class="form-group pmd-textfield pmd-textfield-floating-label" >
  <label class="control-label">Enter a description for image</label>
  <textarea required class="form-control" id="product-note1"></textarea>
 </div>
<img id="thumbnil" style="width:150px; margin-top:10px;"  src="" alt="image"/>



 <div class="form-group pmd-textfield pmd-textfield-floating-label" >
   <label class="control-label">Enter a description for image</label>
  <textarea required class="form-control" id="product-note2"></textarea>
</div>

Js

 function showMainImage(fileInput) {

var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /image.*/;
    if (!file.type.match(imageType)) {
        continue;
    }
    var img = document.getElementById("thumbnil");
    img.file = file;
    var reader = new FileReader();
    reader.onload = (function(aImg) {
        return function(e) {
            aImg.src = e.target.result;
        };
    })(img);
    reader.readAsDataURL(file);
}

firebase.auth().onAuthStateChanged((user) => {
    if (user) {

        database = firebase.database();
        var Cataloguedatabase = HoneyBox_CatalogueDB.database();
        var Cataloguestorage = HoneyBox_CatalogueDB.storage();


        var metadata = {
            'contentType': file.type
        };
        // Push to child path.
        // [START oncomplete]

        var storageRef = Cataloguestorage.ref(ProductID + "/ProductImages/" + file.name);
        storageRef.put(file, metadata).then(function(snapshot) {

            var url = snapshot.downloadURL;
            itemImageUrl.push(url);

            var catalogueupdates = {};
            var updates = {};

            return Cataloguedatabase.ref().update(catalogueupdates);

        })
    }
})
}

I deleted some of the code to only show what I think its minimal and important.

The code works perfectly however, the image size are usually very large and when they are retrieve they take some time to download. I want to resize the uploaded image and create three different image sizes before sending to firebase storage. For example I want to resize the image to

thumbnail (136 X 136)

singleimage (454 X 527)

Since file is what is being put in firebase storage, how can I change the file width and height to match the above dimensions? How can I achieve that in the code above?

score 0 · Answer 1 · answered Mar 19 '18 at 14:59

0

You could use a canvas or use a library (or this one maybe).

answered Mar 19 '18 at 14:59

Antoine

5,504
5
33
54

score -1 · Answer 2 · answered Jul 28 '18 at 12:53

Even if you will change the size of an image, it's good to think about App Engine's get_serving_url. You can do it by setting your own microservice for generating these links. Thanks to that you won't need to have different thumbnail sizes - it all can be achieved by a suffix to your URL.

Clear example of using Google App Engine Images get_serving_url()

List of all the App Engine images service get_serving_url() URI options

how to resize image before saving to firebase storage

2 Answers2