如何在保存至Firebase Storage前调整图片尺寸（附上传代码）

我来帮你搞定这个问题！要在上传到Firebase Storage前调整图片尺寸，咱们可以借助HTML5的Canvas API对选中的图片进行压缩/尺寸调整，再把处理后的文件上传到Storage，同时还能把图片描述和下载链接同步保存到Firebase数据库。下面是完整的分步实现：

1. 核心图片尺寸调整函数 #

先写一个通用的图片处理函数，它会把用户选中的图片文件转换成指定尺寸的Blob对象，方便后续上传：

function resizeImage(file, maxWidth = 800, maxHeight = 600) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const reader = new FileReader();

    reader.onload = (e) => {
      img.src = e.target.result;
    };

    img.onload = () => {
      // 计算缩放比例，保证图片等比例缩小，避免变形
      let width = img.width;
      let height = img.height;
      if (width > maxWidth) {
        height *= maxWidth / width;
        width = maxWidth;
      }
      if (height > maxHeight) {
        width *= maxHeight / height;
        height = maxHeight;
      }

      // 创建Canvas并绘制调整后的图片
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      // 开启高质量平滑渲染
      ctx.imageSmoothingEnabled = true;
      ctx.imageSmoothingQuality = 'high';
      ctx.drawImage(img, 0, 0, width, height);

      // 将Canvas转换为Blob（保留原文件格式，这里也可以强制指定为jpeg/png）
      canvas.toBlob(
        (blob) => {
          if (blob) {
            // 给处理后的Blob添加上原文件名，保持扩展名一致
            const newFile = new File([blob], file.name, { type: file.type });
            resolve(newFile);
          } else {
            reject(new Error('Failed to resize image'));
          }
        },
        file.type || 'image/jpeg',
        0.8 // 图片质量参数，0-1之间，1为最高质量，可按需调整
      );
    };

    img.onerror = (err) => reject(err);
    reader.readAsDataURL(file);
  });
}

2. 修改文件选择的处理逻辑 #

更新你原来的showMainImage函数，先调用尺寸调整函数处理图片，再上传到Firebase Storage：

async function showMainImage(input) {
  const file = input.files[0];
  if (!file) return;

  try {
    // 第一步：调整图片尺寸（这里设置最大宽800、高600，你可以按需修改参数）
    const resizedFile = await resizeImage(file, 800, 600);

    // 第二步：预览处理后的图片
    const reader = new FileReader();
    reader.onload = (e) => {
      document.getElementById('thumbnil').src = e.target.result;
    };
    reader.readAsDataURL(resizedFile);

    // 第三步：上传到Firebase Storage
    const storageRef = firebase.storage().ref(`images/${resizedFile.name}`);
    const uploadTask = storageRef.put(resizedFile);

    // 可选：监听上传进度
    uploadTask.on(
      'state_changed',
      (snapshot) => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log(`上传进度：${progress}%`);
      },
      (error) => {
        console.error('上传失败：', error);
        alert('图片上传出错，请重试');
      },
      async () => {
        // 上传完成后获取图片下载URL
        const downloadURL = await uploadTask.snapshot.ref.getDownloadURL();
        console.log('图片链接：', downloadURL);

        // 第四步：将图片信息保存到Firebase数据库（以Firestore为例）
        const description = document.getElementById('product-note1').value;
        await firebase.firestore().collection('images').add({
          url: downloadURL,
          description: description,
          uploadTime: firebase.firestore.FieldValue.serverTimestamp()
        });

        alert('图片上传并保存成功！');
      }
    );
  } catch (err) {
    console.error('图片处理出错：', err);
    alert('处理图片时发生错误，请重试');
  }
}

3. 补全后的完整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"/>

<!-- 引入Firebase SDK，记得替换成你项目的版本 -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js"></script>
<script>
  // 初始化Firebase，替换成你自己的项目配置
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  firebase.initializeApp(firebaseConfig);
</script>

关键说明 #

• 你可以根据需求修改resizeImage函数里的maxWidth、maxHeight参数，以及toBlob方法里的质量参数，平衡图片质量和文件大小。
• 如果使用Firebase Realtime Database而非Firestore，只需要把保存数据的代码替换成Realtime Database对应的API即可。
• 务必把Firebase初始化配置中的参数替换成你自己项目的信息。

内容的提问来源于stack exchange，提问作者jone2