Canvas：调整图片尺寸时避免模糊

这问题我之前踩过坑！Canvas里图片模糊大多是因为Canvas的像素缓冲区尺寸和它的CSS显示尺寸不匹配导致的，尤其是你用百分比设置Canvas宽度时，很容易忽略这个关键点。结合你的情况，给你几个实用的解决步骤：

1. 让Canvas的像素尺寸匹配显示尺寸 #

Canvas有两个关键尺寸：

• CSS里设置的width/height：这是它在页面上的显示大小（比如你要的父容器百分比）
• Canvas元素自身的width/height属性：这是它的实际像素缓冲区大小

如果这两个尺寸不一致，浏览器会自动拉伸像素，自然就模糊了。你需要动态根据父容器的尺寸，同步更新Canvas的像素缓冲区尺寸：

function resizeCanvas() {
  const canvas = document.getElementById('your-canvas');
  const parentContainer = canvas.parentElement;
  
  // 计算Canvas的显示宽度（比如父容器的80%）
  const displayWidth = parentContainer.clientWidth * 0.8;
  // 根据图片比例计算显示高度，避免变形
  const displayHeight = (displayWidth * img.height) / img.width;

  // 同步更新Canvas的像素缓冲区尺寸
  canvas.width = displayWidth;
  canvas.height = displayHeight;

  // 重新绘制图片
  renderImage();
}

function renderImage() {
  const canvas = document.getElementById('your-canvas');
  const ctx = canvas.getContext('2d');
  
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 禁用图像平滑（确保在绘制前设置）
  ctx.imageSmoothingEnabled = false;
  // 兼容不同浏览器前缀
  ctx.webkitImageSmoothingEnabled = false;
  ctx.mozImageSmoothingEnabled = false;
  ctx.msImageSmoothingEnabled = false;

  // 绘制图片时使用Canvas的像素尺寸，不要用CSS尺寸
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}

// 初始化加载图片并监听窗口 resize
const img = new Image();
img.onload = function() {
  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);
};
img.src = 'your-image-path.jpg';

2. 确保图像平滑设置生效 #

你之前设置ctx.imageSmoothingEnabled = false没生效，大概率是因为：

• 设置时机不对：必须在绘制图片之前设置这个属性，不然浏览器已经开始处理平滑了
• 浏览器兼容性：部分老浏览器需要加前缀，比如上面代码里的webkitImageSmoothingEnabled等，加上这些前缀能覆盖更多场景

3. 检查图片本身的分辨率 #

如果你的图片原始像素尺寸比Canvas的显示尺寸小很多，即使做了上面的处理，拉伸后还是会模糊。这种情况要么换更高分辨率的图片，要么尽量避免过度放大图片。

按上面的步骤调整后，应该就能让Canvas里的图片保持清晰了！

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