当前位置：首页 > JavaScript

js实现图片擦除

2026-04-07 16:16:19JavaScript

实现图片擦除效果的方法

在JavaScript中实现图片擦除效果，可以通过Canvas API结合鼠标或触摸事件来完成。以下是两种常见的实现方式：

使用Canvas和鼠标事件

创建Canvas元素并加载图片，监听鼠标移动事件来擦除部分内容：

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

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

  // 设置混合模式
  ctx.globalCompositeOperation = 'destination-out';

  let isDrawing = false;

  canvas.addEventListener('mousedown', () => isDrawing = true);
  canvas.addEventListener('mouseup', () => isDrawing = false);
  canvas.addEventListener('mousemove', erase);

  function erase(e) {
    if(!isDrawing) return;

    ctx.beginPath();
    ctx.arc(e.offsetX, e.offsetY, 20, 0, Math.PI * 2);
    ctx.fill();
  }
};

img.src = 'your-image.jpg';

使用CSS遮罩和鼠标位置

这种方法通过动态更新CSS遮罩来实现擦除效果：

const eraseArea = document.getElementById('erase-area');
let isErasing = false;

eraseArea.addEventListener('mousedown', () => isErasing = true);
eraseArea.addEventListener('mouseup', () => isErasing = false);
eraseArea.addEventListener('mousemove', (e) => {
  if(!isErasing) return;

  const x = e.clientX - eraseArea.getBoundingClientRect().left;
  const y = e.clientY - eraseArea.getBoundingClientRect().top;

  document.documentElement.style.setProperty('--erase-x', `${x}px`);
  document.documentElement.style.setProperty('--erase-y', `${y}px`);
});

对应的CSS样式：

.erase-container {
  position: relative;
}

.erase-image {
  position: absolute;
  top: 0;
  left: 0;
}

.erase-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(
    circle 20px at var(--erase-x, -100px) var(--erase-y, -100px),
    transparent 0%,
    black 0%
  );
}

实现触摸屏支持

为移动设备添加触摸事件支持：

canvas.addEventListener('touchstart', (e) => {
  e.preventDefault();
  isDrawing = true;
  const touch = e.touches[0];
  const mouseEvent = new MouseEvent('mousedown', {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  canvas.dispatchEvent(mouseEvent);
});

canvas.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  const mouseEvent = new MouseEvent('mousemove', {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  canvas.dispatchEvent(mouseEvent);
});

canvas.addEventListener('touchend', () => {
  isDrawing = false;
});

添加擦除半径控制

允许用户调整擦除工具的大小：

js实现图片擦除

const brushSize = document.getElementById('brush-size');

brushSize.addEventListener('input', function() {
  ctx.lineWidth = this.value;
});

// 更新擦除函数
function erase(e) {
  if(!isDrawing) return;

  ctx.beginPath();
  ctx.arc(e.offsetX, e.offsetY, ctx.lineWidth/2, 0, Math.PI * 2);
  ctx.fill();
}

这些方法提供了从基础到进阶的图片擦除实现，可以根据具体需求选择合适的方式或组合使用。Canvas方法更适合需要精细控制的情况，而CSS方法实现更简单但灵活性较低。