当前位置：首页 > JavaScript

js实现图片擦除

2026-02-02 22:28:31JavaScript

实现图片擦除效果

使用JavaScript实现图片擦除效果可以通过Canvas API完成。以下是具体实现方法：

js实现图片擦除

创建Canvas元素

<canvas id="eraserCanvas" width="500" height="500"></canvas>

初始化Canvas上下文

const canvas = document.getElementById('eraserCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'your-image.jpg';

绘制基础图像

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

实现擦除功能

let isDrawing = false;

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

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

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

    ctx.globalCompositeOperation = 'destination-out';
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI * 2);
    ctx.fill();
}

高级擦除效果

对于更平滑的擦除效果，可以使用以下改进方法：

let lastX = 0;
let lastY = 0;

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

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

    ctx.globalCompositeOperation = 'destination-out';
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.lineWidth = 40;
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.stroke();

    lastX = x;
    lastY = y;
}

canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    const rect = canvas.getBoundingClientRect();
    lastX = e.clientX - rect.left;
    lastY = e.clientY - rect.top;
});

触摸屏支持

canvas.addEventListener('touchstart', (e) => {
    isDrawing = true;
    const rect = canvas.getBoundingClientRect();
    lastX = e.touches[0].clientX - rect.left;
    lastY = e.touches[0].clientY - rect.top;
    e.preventDefault();
});

canvas.addEventListener('touchmove', (e) => {
    if(!isDrawing) return;

    const rect = canvas.getBoundingClientRect();
    const x = e.touches[0].clientX - rect.left;
    const y = e.touches[0].clientY - rect.top;

    ctx.globalCompositeOperation = 'destination-out';
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.lineWidth = 40;
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.stroke();

    lastX = x;
    lastY = y;
    e.preventDefault();
});

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

重置擦除区域

function resetEraser() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}

性能优化

对于大尺寸图像，可以使用以下优化方法：

// 使用离屏Canvas
const bufferCanvas = document.createElement('canvas');
bufferCanvas.width = canvas.width;
bufferCanvas.height = canvas.height;
const bufferCtx = bufferCanvas.getContext('2d');
bufferCtx.drawImage(img, 0, 0);

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

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

    ctx.globalCompositeOperation = 'destination-out';
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI * 2);
    ctx.fill();

    // 更新显示
    ctx.globalCompositeOperation = 'source-over';
    ctx.drawImage(bufferCanvas, 0, 0);
    ctx.globalCompositeOperation = 'destination-out';
}

这些方法提供了从基础到高级的图片擦除实现方案，可根据具体需求进行调整和扩展。

js实现图片擦除