HTML Canvas指定区域图片替换异常：部分图片显示放大问题

我要实现的功能是：在HTML Canvas中把特定区域替换为指定图片。逻辑为：先加载含纯色（如红色）的背景图，遍历像素匹配目标颜色后，用指定图片替换对应区域。目前功能基本可用，但部分图片显示异常放大，怀疑是drawImage函数的使用存在问题。

原代码如下：

// Create a canvas element
var canvas = document.createElement("canvas");
canvas.setAttribute("id", `canvas${canvasn}`);

// document.body
var main_room = document.getElementById('canvas_frame');
main_room.appendChild(canvas);
var ctx = canvas.getContext("2d");

// Load the original image
var img = new Image();
img.src = my_image;

// on load
document.getElementById('loader').classList.add("myloader");

img.onload = function () {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  // Get the image data
  var imgData = ctx.getImageData(0, 0, img.width, img.height);
  var data = imgData.data;

  // Put the modified image data back on the canvas
  ctx.putImageData(imgData, 0, 0);

  if (wall0 != 'none') {
    console.log('CHANGING');
    console.log(wall0);

    var leftwall = new Image();
    leftwall.src = wall0;
    
    leftwall.onload = function() {
      for (var i = 0; i < data.length; i += 4) {
        if (data[i] > 217 && data[i] <= 225 && data[i + 1] > 167 && data[i + 1] < 173 && data[i + 2] > 165 && data[i + 2] < 175) {
          // Calculate the x and y position of the pixel
          var x = (i / 4) % img.width;
          var y = Math.floor((i / 4) / img.width);

          // Scale the replacement image to match the size of the original image pixel
          var scaledWidth = 0.5;
          var scaledHeight = 1;
          ctx.drawImage(leftwall, x, y, 1, 10, x, y, scaledWidth, scaledHeight);
        }
      }
    };
  }
};

问题根源 #

1. drawImage参数错误：你使用的是8参数重载drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)，其中sx/sy是源图的截取起始坐标，你却传入了当前像素的x/y，导致每次从源图的不同位置截取1x10的区域，再缩放到0.5x1的尺寸——Canvas的图像插值会让这些小区域被拉伸放大，最终出现异常。
2. 逐个像素绘制效率极低：对每个匹配到的像素都调用一次drawImage，不仅性能差，还会因为重复绘制导致视觉错乱。

修复方案 #

核心思路是先定位整个目标区域的矩形边界，再一次性将替换图片绘制到该区域，避免逐个像素处理：

// Create a canvas element
var canvas = document.createElement("canvas");
canvas.setAttribute("id", `canvas${canvasn}`);

var main_room = document.getElementById('canvas_frame');
main_room.appendChild(canvas);
var ctx = canvas.getContext("2d");

// Load the original image
var img = new Image();
img.src = my_image;

document.getElementById('loader').classList.add("myloader");

img.onload = function () {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  // Get the image data
  var imgData = ctx.getImageData(0, 0, img.width, img.height);
  var data = imgData.data;

  // 初始化目标区域边界
  let minX = img.width, maxX = 0;
  let minY = img.height, maxY = 0;
  let hasMatchingArea = false;

  // 遍历像素，确定目标区域的完整边界
  for (var i = 0; i < data.length; i += 4) {
    // 匹配目标颜色范围
    if (data[i] > 217 && data[i] <= 225 && data[i + 1] > 167 && data[i + 1] < 173 && data[i + 2] > 165 && data[i + 2] < 175) {
      const x = (i / 4) % img.width;
      const y = Math.floor((i / 4) / img.width);
      
      hasMatchingArea = true;
      // 更新边界值
      minX = Math.min(minX, x);
      maxX = Math.max(maxX, x);
      minY = Math.min(minY, y);
      maxY = Math.max(maxY, y);
    }
  }

  if (wall0 !== 'none' && hasMatchingArea) {
    const leftwall = new Image();
    leftwall.src = wall0;
    
    leftwall.onload = function() {
      // 计算目标区域的宽高
      const targetWidth = maxX - minX + 1;
      const targetHeight = maxY - minY + 1;
      // 一次性绘制替换图片到目标区域
      ctx.drawImage(leftwall, minX, minY, targetWidth, targetHeight);

      // 可选：如果需要保持图片比例，替换为下面的代码
      // const scale = Math.min(targetWidth / leftwall.width, targetHeight / leftwall.height);
      // const drawWidth = leftwall.width * scale;
      // const drawHeight = leftwall.height * scale;
      // const offsetX = minX + (targetWidth - drawWidth) / 2;
      // const offsetY = minY + (targetHeight - drawHeight) / 2;
      // ctx.drawImage(leftwall, offsetX, offsetY, drawWidth, drawHeight);
    };
  }
};

额外优化 #

• 精准颜色匹配：如果背景色是严格纯色，可以直接判断data[i] === r && data[i+1] === g && data[i+2] === b，避免范围匹配的误差。
• 关闭图像平滑：如果需要清晰的像素风格，添加ctx.imageSmoothingEnabled = false，防止缩放时模糊。
• 预加载替换图片：可以提前加载常用的替换图片，避免每次切换时的加载延迟。

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