使用JavaScript上传图片到Firebase Storage前如何将图片调整为100px*100px？

安全阿岳

2026-10-6

调整图片尺寸后上传Firebase Storage完整实现代码

我们通过HTML5 Canvas实现图片尺寸压缩为100px*100px后再上传，完整实现代码如下：

function uploadImage() {
  const ref = firebase.storage().ref();
  const file1 = document.querySelector("#photo").files[0];
  const metadata = {
    contentType: file1.type
  };

  // 图片尺寸调整逻辑
  const img = new Image();
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const reader = new FileReader();

  reader.onload = function (e) {
    img.src = e.target.result;
    img.onload = function () {
      // 固定canvas尺寸为100*100
      canvas.width = 100;
      canvas.height = 100;
      // 绘制调整尺寸后的图片，如需保持原比例不拉伸可自行修改绘制坐标参数
      ctx.drawImage(img, 0, 0, 100, 100);
      
      // canvas转blob后执行上传
      canvas.toBlob(function (blob) {
        const task = ref.child(mydata.uid).put(blob, metadata);
        task
          .then(snapshot => snapshot.ref.getDownloadURL())
          .then(url => {
              db.collection('user').doc(mydata.docid).update({
                profilepic : url,
              });  
            const image = document.querySelector("#image")
            image.src = url;
            alert("uploaded")
          })
          .catch(console.error);
      }, file1.type);
    }
  }
  reader.readAsDataURL(file1);
}