绝了！截图标坐标神器，键鼠自动化必备

键鼠自动化需要坐标？这个纯HTML工具，双击即用，效率直接翻倍！

核心功能

✅ 一键冻结截图画面，不怕页面变动 ✅ 点击即标：红点定位+绿色坐标自动生成 ✅ 两种复制：坐标文本/带坐标截图，直接粘贴 ✅ 本地运行：无广告、不联网，隐私超安全

极简用法

双击打开HTML文件，允许屏幕录制权限
选择标注区域，画面自动冻结
点击标注位置，坐标实时显示
点按钮复制坐标/截图，搞定！

👉 【领工具，手慢无！】


<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>前端自由截图标点</title>
  <style>
    html,body{margin:0;height:100%;overflow:hidden}
    #snap{position:fixed;inset:0;background:#000;cursor:crosshair}
    .dot{position:absolute;width:8px;height:8px;border-radius:50%;
         background:#f00;border:1px solid #fff;transform:translate(-50%,-50%)}
    .txt{position:absolute;font:24px/1.2 monospace;color:#0f0;
         transform:translate(5px,5px);pointer-events:none}
  </style>
</head>
<body>
<canvas id="snap"></canvas>
<div style="position:fixed;top:10px;right:10px;display:flex;gap:10px;z-index:1000;">
  <button id="copyCoords" style="padding:10px 20px;background:#4CAF50;color:white;border:none;border-radius:5px;cursor:pointer;">复制坐标</button>
  <button id="copyImage" style="padding:10px 20px;background:#2196F3;color:white;border:none;border-radius:5px;cursor:pointer;">复制带坐标截图</button>
</div>
<script>
(async ()=>{
  const stream=await navigator.mediaDevices.getDisplayMedia({video:true});
  const video=document.createElement('video');
  video.srcObject=stream;
  await video.play();

  const canvas=document.getElementById('snap');
  const ctx=canvas.getContext('2d');
  canvas.width=video.videoWidth;
  canvas.height=video.videoHeight;
  ctx.drawImage(video,0,0);

  // 立即停掉，画面冻结
  stream.getVideoTracks()[0].stop();

  const dots=[];
  canvas.onclick=e=>{
     const rect=canvas.getBoundingClientRect();
     const x=Math.round(e.clientX-rect.left);
     const y=Math.round(e.clientY-rect.top);
     dots.push({x,y});
     // 画点
     const d=document.createElement('div');
     d.className='dot'; d.style.left=x+'px'; d.style.top=y+'px';
     document.body.appendChild(d);
     // 画文字
     const t=document.createElement('div');
     t.className='txt'; t.style.left=x+'px'; t.style.top=y+'px';
     t.textContent=`(${x}, ${y})`;
     document.body.appendChild(t);
  };

  // 复制坐标到剪贴板
  document.getElementById('copyCoords').onclick=async()=>{
    if(dots.length===0){
      alert('还没有记录任何坐标');
      return;
    }
    
    // 按点击顺序格式化坐标
    const coordsText=dots.map((dot,index)=>`${index+1}. (${dot.x}, ${dot.y})`).join('\n');
    
    try{
      await navigator.clipboard.writeText(coordsText);
      alert('坐标已成功复制到剪贴板');
    }catch(err){
      console.error('复制失败:', err);
      alert('复制失败，请手动复制');
    }
  };

  // 复制带坐标的截图到剪贴板
  document.getElementById('copyImage').onclick=async()=>{
    if(dots.length===0){
      alert('还没有记录任何坐标');
      return;
    }
    
    // 创建一个新的canvas用于绘制带坐标的图像
    const newCanvas=document.createElement('canvas');
    newCanvas.width=canvas.width;
    newCanvas.height=canvas.height;
    const newCtx=newCanvas.getContext('2d');
    
    // 复制原始canvas内容
    newCtx.drawImage(canvas,0,0);
    
    // 重新绘制所有点和坐标文本
    newCtx.font='24px monospace';
    newCtx.fillStyle='#0f0';
    
    dots.forEach(dot=>{
      // 画点
      newCtx.beginPath();
      newCtx.arc(dot.x,dot.y,4,0,Math.PI*2);
      newCtx.fillStyle='#f00';
      newCtx.fill();
      newCtx.strokeStyle='#fff';
      newCtx.lineWidth=1;
      newCtx.stroke();
      
      // 画坐标文本
      const text=`(${dot.x}, ${dot.y})`;
      newCtx.fillStyle='#0f0';
      newCtx.fillText(text,dot.x+5,dot.y+5);
    });
    
    try{
      // 将canvas转换为Blob
      const blob=await new Promise(resolve=>newCanvas.toBlob(resolve,'image/png'));
      if(!blob){
        throw new Error('无法创建图像Blob');
      }
      
      // 复制到剪贴板
      await navigator.clipboard.write([
        new ClipboardItem({
          'image/png': blob
        })
      ]);
      
      alert('带坐标的截图已成功复制到剪贴板');
    }catch(err){
      console.error('复制图像失败:', err);
      alert('复制图像失败，请检查控制台');
    }
  };
})();
</script>
</body>
</html>

摸鱼

https://gtjs-9gjbu0mx.maozi.io/2025/12/15/rc/jie-tu-zuo-biao/