JavaScript Canvas drawImage异常：截取图片区域宽高不符问题

嘿，我一眼就看出你踩了两个Canvas新手常犯的坑！咱们一步步来搞定：

问题根源分析 #

1. Canvas原生尺寸与CSS尺寸混淆：你只通过CSS给#squareTarget设置了38px的宽高，但canvas元素本身的原生width/height属性（也就是绘图缓冲区的实际分辨率）默认是300x150。这时候drawImage是按照300x150的画布计算绘制的，再通过CSS缩放到38x38，自然比例全乱，看起来宽高和预期不符。
2. 图片未加载完成就执行绘制：你设置完图片src后直接调用drawImage，这时候图片还在加载中，浏览器拿不到完整的图片数据，绘制逻辑自然会异常。

修改后的完整代码 #

首先，给canvas元素加上原生宽高属性（别只依赖CSS）：

<canvas id="squareTarget" width="38" height="38"></canvas>

然后调整JS代码，确保图片加载完成后再执行绘制：

window.onload = function() { 
  const ImageObjSketch = new Image(); 
  ImageObjSketch.src = 'https://i.imgur.com/75lATF9.png'; 
  // 等图片完全加载后再执行绘制逻辑
  ImageObjSketch.onload = function() {
    const canvasClone = document.getElementById("squareTarget"); 
    const ctxClone = canvasClone.getContext("2d"); 
    // drawImage参数说明：img, 源图起始x, 源图起始y, 源图截取宽, 源图截取高, 画布起始x, 画布起始y, 画布绘制宽, 画布绘制高
    ctxClone.drawImage(ImageObjSketch, 34, 119, 16, 16, 0, 0, 38, 38); 
  }
}

CSS保留你原有设置即可：

#squareTarget { 
  width: 38px; 
  height: 38px; 
  position: relative; 
  /* 你原来的right相关样式可以继续写在这里 */
}

为什么这样改就对了？ #

• 给canvas设置width和height属性，让绘图的实际分辨率和页面显示尺寸一致，drawImage的坐标、尺寸计算就不会有偏差，避免缩放失真。
• 图片的onload事件确保只有当图片完全加载完成后，才会执行绘制操作，此时浏览器能正确读取源图的像素数据，drawImage就能按照预期截取并绘制目标区域。

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