console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
	<style>
		#image-container {
			/* position: relative; */
		}

		#image {
			/* user-select: none; */
			/* pointer-events: none; */
			max-width: 100%;
		}

		#mosaic-overlay {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9;
		}
	</style>
</head>

<body>
	<div id="image-container">
		<img src="https://www.lilnong.top/static/img/wx-linong.jpg" id="image" alt="Image" />
		<!-- <img src="./bpic7031.jpg" id="image" alt="Image" /> -->
    <canvas id="mosaic-overlay"></canvas>
    
  </div>
  <button class="btn">撤回</button>
  <button class="submitBtn">确认</button>
  <script>
    const image = document.getElementById("image");
    const mosaicOverlay = document.getElementById("mosaic-overlay");
    image.onload = ()=>{
        mosaicOverlay.width = image.width
        mosaicOverlay.height = image.height
    }
    const ctx = mosaicOverlay.getContext("2d");
    // 设置马赛克效果的尺寸
    const mosaicSize = 20; // 调整这个值来改变马赛克块的大小
    let isMosaicing = false;
    // 监听鼠标按住左键事件
    const handleStart = () => {
      isMosaicing = true;
      arr.push([])
    }
    mosaicOverlay.addEventListener("mousedown", handleStart);
    mosaicOverlay.addEventListener("touchstart", handleStart);
    // 监听鼠标松开事件
    const handleMove = () => {
      isMosaicing = false;
    }
    window.addEventListener("mouseup", handleMove);
    window.addEventListener("touchend", handleMove);

    // 监听鼠标移动事件，添加马赛克效果
    const btn = document.querySelector('.btn')
    let arr  = []
    const handleEnd = (e) => {
      if (isMosaicing) {
        const point = e?.touches?.[0] || e;
        const x = point.clientX - mosaicSize / 2;
        const y = point.clientY - mosaicSize / 2;
        arr[arr.length-1].push({x,y})
        // 绘制马赛克块
      ctx.drawImage(
          image,
            Math.random() * image.width,
            Math.random() * image.height,
          mosaicSize,
          mosaicSize,
          x,
          y,
          mosaicSize,
          mosaicSize
        );
        
      }
    }
    mosaicOverlay.addEventListener("mousemove", handleEnd);
    mosaicOverlay.addEventListener("touchmove", handleEnd);

    
    btn.addEventListener('click',( )=>{
        const list = arr.pop();
        list.forEach(({x,y})=>{
            ctx.clearRect(x, y,mosaicSize, mosaicSize);
        })
    })

    const submitBtn  = document.querySelector('.submitBtn')
    submitBtn.addEventListener('click',()=>{
          mosaicOverlay.toBlob((blob) => {
  const newImg = document.createElement("img");
  const url = URL.createObjectURL(blob);

  newImg.onload = () => {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
}
);
    })


  </script>
</body>
</html>