如何在Web应用中通过JavaScript调整上传图片的尺寸？

我来帮你搞定这个图片尺寸调整的问题！结合你现有的页面代码，我们可以通过Canvas API来实现图片的等比例缩放，确保调整后的图片能完美适配你页面上300x300的img标签。

你的现有页面代码 #

先确认下你的HTML结构：

<input type="file" onchange="showImage(this);" accept="image/png" name="file"/>
<img id="image" src="../Assets/noimage.png" height="300" width="300"/>

完整的showImage函数实现 #

替换你未写完的JavaScript代码，这个函数会完成文件读取、尺寸调整和图片展示的全流程：

function showImage(input) {
  // 检查是否有选中的文件
  if (input.files && input.files[0]) {
    // 从ViewBag获取文件大小限制（保留你原有的判断逻辑）
    const fileSizeLimit = parseFloat('@ViewBag.size');
    if (input.files[0].size >= fileSizeLimit) {
      alert('文件大小超过限制，请选择更小的图片！');
      return;
    }

    // 1. 读取上传的图片文件
    const reader = new FileReader();
    reader.onload = function(e) {
      const tempImg = new Image();
      // 2. 确保图片完全加载后再处理尺寸
      tempImg.onload = function() {
        // 创建Canvas用于图片缩放
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        
        // 目标尺寸和你的img标签一致：300x300
        const targetWidth = 300;
        const targetHeight = 300;
        
        // 计算等比例缩放的比例，避免图片拉伸变形
        const scaleRatio = Math.min(targetWidth / tempImg.width, targetHeight / tempImg.height);
        const scaledWidth = tempImg.width * scaleRatio;
        const scaledHeight = tempImg.height * scaleRatio;
        
        // 设置Canvas的尺寸，居中绘制图片
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        ctx.clearRect(0, 0, targetWidth, targetHeight);
        // 把缩放后的图片绘制在Canvas中央
        ctx.drawImage(tempImg, (targetWidth - scaledWidth)/2, (targetHeight - scaledHeight)/2, scaledWidth, scaledHeight);
        
        // 3. 将Canvas转换为图片URL，设置到页面的img标签
        const resizedImageUrl = canvas.toDataURL('image/png');
        document.getElementById('image').src = resizedImageUrl;
      };
      // 加载读取到的图片数据
      tempImg.src = e.target.result;
    };
    // 把文件读取为DataURL格式
    reader.readAsDataURL(input.files[0]);
  }
}

关键步骤解释 #

• FileReader读取文件：把用户上传的图片转为浏览器能识别的DataURL，方便后续在Image对象中加载。
• 等比例缩放计算：通过scaleRatio确保图片按原比例缩小/放大，不会出现拉伸变形，同时适配300x300的展示区域。
• Canvas绘制与转换：利用Canvas绘制缩放后的图片，再转为DataURL赋值给页面的img标签，实现调整后图片的即时展示。

额外补充：如果需要提交调整后的图片到服务器 #

如果你还要把处理后的图片上传到后端，可以把Canvas转为Blob对象，通过FormData发送：

// 在Canvas绘制完成后添加这段代码
canvas.toBlob(function(resizedBlob) {
  const formData = new FormData();
  // 把Blob对象添加到FormData，指定文件名
  formData.append('file', resizedBlob, 'resized-image.png');
  
  // 用fetch发送到服务器示例
  fetch('/your-upload-endpoint', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log('上传成功：', data))
  .catch(error => console.error('上传失败：', error));
}, 'image/png');

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