Question

我使用此代码上传并将上传的文件保存到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>

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

        })
    }
})
}

我删除了一些代码，只显示了我认为最小和最重要的内容。

代码工作正常但是，图像大小通常非常大，当它们被检索时，它们需要一些时间来下载。我想调整上传的图像大小，并在发送到firebase存储之前创建三种不同的图像大小。例如，我想将图像调整为

缩略图（136 X 136）

单图像（454 X 527）

由于文件是放在firebase存储中的，因此如何更改文件宽度和高度以匹配上述尺寸？我怎样才能在上面的代码中实现呢？

Answer 1

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

Answer 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

如何在保存到firebase存储之前调整图像大小

2 个答案: