如何在保存到 Firebase 存储之前调整图像大小答案

【问题标题】：how to resize image before saving to firebase storage如何在保存到 Firebase 存储之前调整图像大小
【发布时间】：2018-08-28 04:26:36
【问题描述】：

我使用此代码将上传的文件上传并保存到 firebase 数据库。

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>

 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);

        })
    }
})
}

我删除了一些代码，只显示我认为它最小且重要的部分。

代码完美运行，但是图像尺寸通常非常大，并且在检索它们时需要一些时间来下载。我想在发送到 Firebase 存储之前调整上传图像的大小并创建三种不同的图像大小。例如我想将图像调整为

缩略图 (136 X 136)

单幅图像 (454 X 527)

由于文件是放在 Firebase 存储中的内容，我如何更改文件的宽度和高度以匹配上述尺寸？如何在上面的代码中实现这一点？

【问题讨论】：

标签： javascript html image firebase-storage

【解决方案1】：

您可以use a canvas 或use a library（或this one 可能）。

【讨论】：

【解决方案2】：

即使您要更改图像的大小，考虑一下 App Engine 的 get_serving_url 也是一件好事。您可以通过设置自己的微服务来生成这些链接来做到这一点。多亏了这一点，您不需要使用不同的缩略图大小 - 这一切都可以通过 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

【讨论】：