如何点击按钮修改图片特定区域颜色且保留纹理不影响其他部分

针对你需要点击按钮修改图片指定区域（如示例中的桌面）颜色、保留纹理且不影响其他区域的需求，以下是两种可行方案：

方案一：Canvas 像素级精准处理 #

通过Canvas操作目标区域的像素，既能精准控制修改范围，又能完整保留纹理的明暗细节：

代码实现 #

<!-- 隐藏原图，用Canvas渲染 -->
<img id="sourceImg" src="你的图片路径" style="display: none;">
<canvas id="renderCanvas"></canvas>
<button id="changeDeskColor">将桌面改为红色</button>

<script>
const img = document.getElementById('sourceImg');
const canvas = document.getElementById('renderCanvas');
const ctx = canvas.getContext('2d');
const colorBtn = document.getElementById('changeDeskColor');

// 图片加载完成后初始化Canvas
img.onload = () => {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
};

// 定义目标区域（需根据你的图片实际坐标调整，示例为桌面区域）
const targetRect = { x: 50, y: 300, width: 700, height: 200 };

colorBtn.addEventListener('click', () => {
  // 获取目标区域的像素数据
  const pixelData = ctx.getImageData(targetRect.x, targetRect.y, targetRect.width, targetRect.height);
  const data = pixelData.data;

  // 遍历像素：保留亮度，替换为红色调
  for (let i = 0; i < data.length; i += 4) {
    // 计算当前像素的灰度值（保留纹理明暗）
    const grayScale = 0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2];
    // 替换为对应亮度的红色，alpha通道不变
    data[i] = grayScale;   // 红色通道
    data[i+1] = 0;         // 绿色通道置0
    data[i+2] = 0;         // 蓝色通道置0
  }

  // 将修改后的像素放回Canvas
  ctx.putImageData(pixelData, targetRect.x, targetRect.y);
});
</script>

方案说明 #

• 先通过getImageData提取目标区域的像素信息，计算每个像素的灰度值以保留纹理的明暗层次
• 将像素的RGB通道替换为目标色调（示例为红色），保证颜色统一且不丢失纹理
• 仅对指定坐标区域的像素修改，完全不影响图片其他部分

方案二：CSS 混合模式 + 蒙版（轻量实现） #

无需复杂的像素操作，通过CSS的混合模式和裁剪蒙版快速实现需求：

代码实现 #

<div class="img-wrapper">
  <img src="你的图片路径" alt="示例图片">
  <!-- 用于替换颜色的覆盖层 -->
  <div class="color-layer" id="deskColorLayer"></div>
</div>
<button id="changeDeskColor">将桌面改为红色</button>

<style>
.img-wrapper {
  position: relative;
  display: inline-block;
}
.color-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 裁剪出桌面区域（参数：上 右 下 左，需根据实际图片调整） */
  clip-path: inset(300px 50px 100px 50px);
  background-color: red;
  /* color混合模式：保留底层图片的亮度/纹理，仅替换色调 */
  mix-blend-mode: color;
  pointer-events: none; /* 避免遮挡图片交互 */
}
</style>

<script>
const colorBtn = document.getElementById('changeDeskColor');
const colorLayer = document.getElementById('deskColorLayer');

colorBtn.addEventListener('click', () => {
  colorLayer.style.backgroundColor = 'red'; // 可替换为任意目标颜色
});
</script>

方案说明 #

• 用clip-path精准裁剪出需要修改的区域，仅让彩色覆盖层显示在目标位置
• 通过mix-blend-mode: color混合模式，让覆盖层的颜色替换目标区域的色调，同时保留原图片的纹理和明暗细节
• 实现简单，性能优异，适合快速开发场景

注意事项 #

• 两种方案都需要根据你的实际图片调整目标区域的坐标/裁剪参数，可以用PS、Figma等工具获取精确位置
• 若使用Canvas方案，图片需满足同源策略，跨域图片需配置CORS权限

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