当前位置：首页 > JavaScript

js实现图片换肤效果

2026-01-31 02:51:05JavaScript

使用Canvas实现图片换肤效果

通过Canvas的像素级操作可以修改图片颜色，实现换肤效果。以下是一个基础实现示例：

function changeSkinColor(imageElement, targetColor) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = imageElement.width;
  canvas.height = imageElement.height;

  ctx.drawImage(imageElement, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];

    // 检测皮肤区域（根据RGB范围）
    if (r > 150 && g > 100 && b > 100 && r > g && r > b) {
      data[i] = targetColor.r;     // R
      data[i + 1] = targetColor.g; // G
      data[i + 2] = targetColor.b; // B
    }
  }

  ctx.putImageData(imageData, 0, 0);
  return canvas.toDataURL();
}

使用CSS滤镜实现颜色调整

CSS滤镜可以快速实现整体色调变化，适合简单换肤需求：

.skin-filter {
  filter: 
    hue-rotate(30deg) 
    saturate(150%) 
    brightness(110%);
}

document.getElementById('skinImage').classList.add('skin-filter');

使用GLSL着色器高级效果

WebGL可实现更专业的皮肤着色效果，以下是一个片段着色器示例：

precision mediump float;
uniform sampler2D texture;
varying vec2 vTexCoord;
uniform vec3 newSkinTone;

void main() {
  vec4 color = texture2D(texture, vTexCoord);
  float skinMask = step(0.6, color.r) * step(color.g, color.r) * step(color.b, color.r);

  gl_FragColor = mix(
    color,
    vec4(
      newSkinTone.r * color.r,
      newSkinTone.g * color.g,
      newSkinTone.b * color.b,
      color.a
    ),
    skinMask
  );
}

使用机器学习皮肤检测

TensorFlow.js可实现更精确的皮肤区域检测：

async function applySkinChange(imageElement) {
  const model = await bodyPix.load();
  const segmentation = await model.segmentPerson(imageElement);

  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = imageElement.width;
  canvas.height = imageElement.height;
  ctx.drawImage(imageElement, 0, 0);

  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    if (segmentation.data[i/4] === 1) { // 皮肤区域
      data[i] = 255;   // R
      data[i+1] = 200; // G
      data[i+2] = 180; // B
    }
  }

  ctx.putImageData(imageData, 0, 0);
  return canvas.toDataURL();
}