js实现模特换装

实现思路

模特换装功能通常通过图片叠加或Canvas绘制实现，核心是动态替换服装图层。以下是两种常见实现方式：

基于DOM的图片叠加

利用绝对定位和z-index控制服装图层叠加：

<div class="dress-container" style="position: relative; width: 300px; height: 500px;">
  <img id="model" src="model.png" style="position: absolute; z-index: 1;">
  <img id="dress" src="dress1.png" style="position: absolute; z-index: 2;">
</div>

function changeDress(newDressUrl) {
  document.getElementById('dress').src = newDressUrl;
}

基于Canvas的合成方案

更适合复杂交互和效果处理：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let modelImg = new Image();
let dressImg = new Image();

function loadImages() {
  modelImg.onload = () => {
    canvas.width = modelImg.width;
    canvas.height = modelImg.height;
    redraw();
  };
  modelImg.src = 'model.png';
}

function changeDress(newDressUrl) {
  dressImg.onload = redraw;
  dressImg.src = newDressUrl;
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(modelImg, 0, 0);
  if (dressImg.complete) {
    ctx.drawImage(dressImg, 0, 0);
  }
}

进阶优化技巧

• 预加载所有服装图片避免切换延迟
• 使用精灵图(Sprite Sheet)管理多套服装
• 添加服装缩放/旋转控制功能

  function drawScaledDress(scale) {
  ctx.save();
  ctx.translate(canvas.width/2, canvas.height/2);
  ctx.scale(scale, scale);
  ctx.drawImage(dressImg, -dressImg.width/2, -dressImg.height/2);
  ctx.restore();
  }

注意事项

• 确保所有服装素材使用相同尺寸和透明背景
• 移动端需考虑触摸事件处理
• 性能优化：对静态模特图使用CSS硬件加速