Canvas图片缩放问题：加载图片后无法缩至416x416

嘿，我看你尝试用Canvas把图片缩放到416x416，但结果没生效，结合你的代码来看，最可能的问题出在Canvas本身的尺寸设置上，我来帮你搞定这个问题：

问题根源 #

很多开发者会忽略一个关键细节：Canvas有两个“尺寸”——一个是元素本身的width/height属性（这是绘图缓冲区的实际大小，决定了绘制内容的分辨率），另一个是CSS里设置的宽高（只是控制它在页面上的显示大小）。如果你的Canvas没有设置width和height属性，它会默认使用300x150的缓冲区尺寸，这时候哪怕你用drawImage指定了416x416，绘制的内容也会被压缩到300x150的缓冲区里，最后显示出来自然不是你想要的大小。

修复后的代码 #

我给你的代码做了两处关键修改，你可以直接使用：

<!-- 先给Canvas添加width和height属性，和目标缩放尺寸一致 -->
<canvas id="targetCanvas" width="416" height="416"></canvas>
<input type="file" onchange="readURL(this)" />

<script>
// 先获取对应的Canvas元素
const canvas = document.getElementById('targetCanvas');
const ctx = canvas.getContext('2d');

function readURL(input) {
  if(input.files && input.files[0]) {
    const reader = new FileReader();
    reader.onload = function (e) {
      const image = new Image();
      image.src = e.target.result;
      image.addEventListener("load", function(){
        // 绘制前先清空画布，避免多次选择图片时叠加
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 绘制缩放后的图片
        ctx.drawImage(image, 0, 0, 416, 416);
      });
    };
    reader.readAsDataURL(input.files[0]);
  }
}
</script>

额外优化建议 #

为了让Canvas的显示效果和绘图完全一致，建议再给它加个CSS样式：

#targetCanvas {
  width: 416px;
  height: 416px;
  /* 可选：加个边框方便你看到Canvas的范围 */
  border: 1px solid #ccc;
}

这样修改后，你再选择图片，应该就能看到正确缩放到416x416的效果啦。

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