当前位置: 首页 > news >正文

在图片上高亮标注区域

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片标注框</title>
  <style>
    .container {
      position: relative;
      width: 600px;
      height: 400px;
      margin: 50px auto;
    }

    .image {
      width: 100%;
      height: 100%;
      display: block;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
    }

    .annotation-box {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 2px solid red;
      cursor: move;
      background-size: 600px 400px;
    }
  </style>
</head>

<body>
  <div class="container">
    <img src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg" class="image" alt="图片">
    <div class="overlay"></div>
    <div class="annotation-box"></div>
  </div>
  <script>
    const annotationBox = document.querySelector('.annotation-box');
    const container = document.querySelector('.container');
    let isDragging = false;
    let offsetX, offsetY;

    annotationBox.addEventListener('mousedown', (e) => {
      isDragging = true;
      offsetX = e.clientX - annotationBox.offsetLeft;
      offsetY = e.clientY - annotationBox.offsetTop;
    });

    document.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      let x = e.clientX - offsetX;
      let y = e.clientY - offsetY;
      x = Math.max(0, Math.min(container.clientWidth - annotationBox.clientWidth, x));
      y = Math.max(0, Math.min(container.clientHeight - annotationBox.clientHeight, y));
      annotationBox.style.left = x + 'px';
      annotationBox.style.top = y + 'px';
      annotationBox.style.backgroundImage = `url('https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg')`;
      annotationBox.style.backgroundSize = `${container.clientWidth}px ${container.clientHeight}px`;
      annotationBox.style.backgroundPosition = `-${x}px -${y}px`;
    });


    document.addEventListener('mouseup', () => {
      isDragging = false;
    });
  </script>
</body>

</html>

综合思路就是在原始图片上添加蒙层然后,在标注区域截取图片背景展示

http://www.dtcms.com/a/81467.html

相关文章:

  • LeetCode两数之和
  • Flink CEP:复杂事件处理详解
  • OpenHarmony和HarmonyOS到底有什么区别?
  • 在使用umi框架的项目中如何“避免链接关键请求”
  • Flink 通过 Chunjun Oracle LogMiner 实时读取 Oracle 变更日志并写入 Doris 的方案
  • DAY36贪心算法Ⅴ
  • Linux常用指令(3)
  • SQL授予用户查询某个模式或者具体某个表
  • 分布式事务解决方案简介
  • AI大模型:(二)1.1 deepseek+ollama本地快速部署
  • 关于Flask框架30道面试题及解析
  • CUDAOpenCV 基于Hessian矩阵计算特征值
  • 蓝桥杯 之 数论
  • C++学习之QT中HTTP正则表达式
  • 基于 ABAP RESTful 应用程序编程模型开发 OData V4 服务
  • 面试复习-基础网络+运维知识
  • 指针与引用的深度解析 (408数据结构入门)
  • 深入解析数据结构中的表:从数组到哈希表
  • 新能源市场科技变革:用Python解码产业趋势与技术创新
  • C 语 言 --- 操 作 符 2
  • 开源新星YT-Navigator:重新定义你的视频探索之旅!
  • Embedding类与word2vec模型
  • SQL Server——表数据的插入、修改和删除
  • 信息学奥赛一本通 1610:玩具装箱 | 洛谷 P3195 [HNOI2008] 玩具装箱
  • 银联无感支付实现
  • leetcode_双指针 11. 盛最多水的容器
  • 两市总的净流出和净流入来分析情况
  • OO_Unit1
  • 【C++11】左值引用、右值引用和移动语义
  • 20250321在荣品的PRO-RK3566开发板的buildroot系统下使用ll命令【直接编译进IMG】