如何使用Canvas裁剪图片的指定中心960×540区域？

嘿，我来帮你搞定这个Canvas裁剪的问题！你现在遇到的核心问题是：drawImage的源坐标/尺寸是基于原始图片的像素尺寸，不是页面中缩放后的显示尺寸，所以直接用页面里图片的宽度计算偏移会导致裁剪位置出错。

问题分析 #

你的原始图片尺寸是2217×790，页面中缩放后显示为1515×540，Canvas尺寸960×540。要裁剪页面中图片的中心960×540区域，需要把页面中的显示坐标转换为原始图片的像素坐标，才能正确传递给drawImage。

修正步骤 #

1. 获取图片的真实尺寸和页面显示尺寸：

   • 原始尺寸：用img.naturalWidth和img.naturalHeight（不受页面缩放影响）
   • 页面显示尺寸：用img.clientWidth和img.clientHeight

2. 计算缩放比例：因为图片是等比缩放的，用高度比或者宽度比结果一致：

   const scale = img.clientHeight / img.naturalHeight;
   

3. 计算原始图片上的裁剪区域：

   • 页面中需要裁剪的水平偏移：pageOffsetX = (img.clientWidth - canvas.width) / 2
   • 转换为原始图片的水平偏移：sx = pageOffsetX / scale
   • 原始图片上裁剪的宽度：sWidth = canvas.width / scale
   • 垂直方向因为页面显示高度和Canvas高度一致，直接取原始图片的全高：sy = 0，sHeight = img.naturalHeight

4. 执行裁剪绘制：

完整修正代码 #

// 确保图片加载完成后再执行，避免尺寸获取错误
document.getElementById("imgt").onload = function() {
  const img = this;
  const canvas = document.getElementById("canvasa");
  const ctx = canvas.getContext("2d");
  
  // 获取关键尺寸
  const naturalWidth = img.naturalWidth;
  const naturalHeight = img.naturalHeight;
  const displayWidth = img.clientWidth;
  const displayHeight = img.clientHeight;
  
  // 计算图片的缩放比例
  const scale = displayHeight / naturalHeight;
  
  // 推导原始图片上的裁剪参数
  const pageOffsetX = (displayWidth - canvas.width) / 2;
  const sx = pageOffsetX / scale;
  const sWidth = canvas.width / scale;
  const sy = 0;
  const sHeight = naturalHeight;
  
  // 绘制裁剪后的内容到Canvas
  ctx.drawImage(img, sx, sy, sWidth, sHeight, 0, 0, canvas.width, canvas.height);
};

为什么你的原代码不对？ #

你原代码里用$('#imgt').width()（页面显示宽度）计算出的a是页面中的偏移量，但drawImage的第一个偏移参数sx需要的是原始图片的像素位置，不是页面的显示位置，所以直接传入会导致裁剪区域偏移，得不到你想要的中心区域。

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