JavaScript 在网页上的图片中画矩形框,并得到实时对角坐标

最新推荐文章于 2023-03-09 20:23:03 发布
最新推荐文章于 2023-03-09 20:23:03 发布
阅读量3.5k 收藏 19
点赞数 6
分类专栏： 模拟 小贴士
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuronekonano/article/details/98498613
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>矩形绘制工具</title>
    <style type="text/css">
        .box {
            background: #f00;
            width: 0px;
            height: 0px;
            position: absolute;
            opacity: 0.5;
            cursor: move;
        }
        .droptarget {
            float: left;
            width: 100px;
            height: 1000px;
            margin: 15px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
</head>

<body>

<h1>标注窗口</h1>


    <script>//框内移动显示坐标
        function cnvs_getCoordinates(e)
        {
            x=e.pageX-e.target.offsetLeft;//不能用clientX,pageX为文档坐标,clientX表示浏览器界面坐标,会随滚动条改变
            y=e.pageY-e.target.offsetTop;
            document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
        }
        function cnvs_clearCoordinates()//出框后不显示坐标
        {
            document.getElementById("xycoordinates").innerHTML="";
        }
    </script>
    <div id="coordiv" style="{{ style }}" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()" >
        <img src="{{ img_src }}" ondragstart="return false;" >

        <script type="text/javascript">
            console.log('=========')
            window.onload = function(e)
            {
                e = e || window.event;
                // startX, startY 为鼠标点击时初始坐标
                // diffX, diffY 为鼠标初始坐标与 box 左上角坐标之差，用于拖动
                var startX, startY, diffX, diffY;
                // 是否拖动，初始为 false
                var dragging = false;

                var coordiv = document.getElementById('coordiv');

                // 鼠标按下
                document.onmousedown = function(e)
                {
                    startX = e.pageX;
                    startY = e.pageY;

                    // 如果鼠标在 box 上被按下,坐标判定防止在box之外
                    if(startY<=coordiv.offsetTop+coordiv.offsetHeight && startY>=coordiv.offsetTop && startX>=coordiv.offsetLeft && startX<=coordiv.offsetLeft+coordiv.offsetWidth)
                    {
                        if(e.target.className.match(/box/))
                        {
                            // 允许拖动
                            dragging = true;

                            // 设置当前 box 的 id 为 moving_box
                            if(document.getElementById("moving_box") !== null)
                            {
                                document.getElementById("moving_box").removeAttribute("id");
                            }
                            e.target.id = "moving_box";

                            // 计算坐标差值
                            diffX = startX - e.target.offsetLeft;
                            diffY = startY - e.target.offsetTop;
                        }
                        else
                        {
                            // 在页面创建 box
                            var active_box = document.createElement("div");
                            active_box.id = "active_box";
                            active_box.className = "box";
                            active_box.style.top = startY + 'px';
                            active_box.style.left = startX + 'px';
                            active_box.setAttribute("ondrop","drop(event)");
                            active_box.setAttribute("ondragover","allowDrop(event)");
                            document.body.appendChild(active_box);
                            active_box = null;
                        }
                    }

                };

                // 鼠标移动
                document.onmousemove = function(e)
                {
                    if(e.pageY <= coordiv.offsetTop+coordiv.offsetHeight && e.pageY >= coordiv.offsetTop && e.pageX >= coordiv.offsetLeft && e.pageX <= coordiv.offsetLeft+coordiv.offsetWidth)
                    {
                        // 更新 box 尺寸
                        if(document.getElementById("active_box") !== null)//如果document中有active_box,就改变box大小
                        {
                            var ab = document.getElementById("active_box");
                            ab.style.width = e.pageX - startX + 'px';
                            ab.style.height = e.pageY - startY + 'px';
                        }

                        // 移动，更新 box 坐标
                        if(document.getElementById("moving_box") !== null && dragging)
                        {
                            var mb = document.getElementById("moving_box");
                            var xy_div = document.getElementById(mb.style.left.substring(0,mb.style.left.length-2)+mb.style.top.substring(0,mb.style.top.length-2));

                            var tmx = e.pageX - diffX;
                            var tmy = e.pageY - diffY;


                            if(tmx + mb.offsetWidth <= coordiv.offsetLeft+coordiv.offsetWidth && tmx >= coordiv.offsetLeft && tmy + mb.offsetHeight <= coordiv.offsetTop+coordiv.offsetHeight && tmy >= coordiv.offsetTop)
                            {
                                mb.style.top = e.pageY - diffY + 'px';
                                mb.style.left = e.pageX - diffX + 'px';

                                if(xy_div !== null)
                                {
                                    var new_x = mb.style.left.substring(0, mb.style.left.length - 2);
                                    var new_y = mb.style.top.substring(0,mb.style.top.length - 2);
                                    xy_div.id = new_x+new_y;
                                    new_x-=coordiv.offsetLeft;
                                    new_y-=coordiv.offsetTop;
                                    var new_r = parseInt(mb.style.width.substring(0,mb.style.width.length-2))+parseInt(new_x)-coordiv.offsetLeft;
                                    var new_b = parseInt(mb.style.height.substring(0,mb.style.height.length-2))+parseInt(new_y)-coordiv.offsetTop;//"[ left: "+ new_x +", top: "+ new_y + ", right: " + new_r +" , bottom: "+ new_b +" ]";
                                    xy_div.innerText = new_x +","+ new_y + "," + new_r +","+ new_b;
                                    var input_div = document.getElementById("x_y")
                                    input_div.value=xy_div.innerHTML
                                }
                            }
                        }
                    }
                };

                // 鼠标抬起
                document.onmouseup = function(e)
                {
                    // 禁止拖动
                    dragging = false;
                    if(document.getElementById("active_box") !== null)
                    {
                        var ab = document.getElementById("active_box");
                        ab.removeAttribute("id");
                        // 如果长宽均小于 3px，移除 box
                        if(ab.offsetWidth < 10 || ab.offsetHeight < 10)
                        {
                            document.body.removeChild(ab);
                        }
                        if(ab.offsetHeight >=10 && ab.offsetHeight >=10)
                        {
                            var xy_div = document.createElement("div");
                            xy_div.id=startX.toString()+startY.toString();
                            document.body.appendChild(xy_div);
                            xy_div.innerHTML = (startX-coordiv.offsetLeft) + "," + (startY-coordiv.offsetTop) + "," + (e.pageX-coordiv.offsetLeft) + "," + (e.pageY-coordiv.offsetTop);
                            var input_div = document.getElementById("x_y")
                            input_div.value=xy_div.innerHTML
                        }
                    }
                };

                //双击鼠标
                document.ondblclick = function (e)
                {
                    if(e.target.className.match(/box/))
                    {


                        if (document.getElementById("del_box") !== null)
                        {
                            document.getElementById("del_box").removeAttribute("id");
                        }
                        e.target.id = "del_box";
                        var ab = document.getElementById("del_box");

                        var xy_div = document.getElementById(ab.style.left.substring(0,ab.style.left.length-2)+ab.style.top.substring(0,ab.style.top.length-2))
                        if(xy_div !== null)
                        {
                            xy_div.removeAttribute("id");
                            document.body.removeChild(xy_div);
                        }
                        document.body.removeChild(ab);
                    }

                }
            };
        </script>
    </div>
    <br>
    <form method="POST">
        <input type="text" name="location" placeholder="座位"><br>
        <input type="text" name="coor" placeholder="坐标" readonly="true" id="x_y" style="width: 800px"><br>
        <input type="submit" value="提交坐标">
    </form>

    <script>
        function dragStart(event)
        {
            event.dataTransfer.setData("Text", event.target.id);
        }
        function allowDrop(event)
        {
            event.preventDefault();
        }
        function drop(event)
        {
            event.preventDefault();
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
        }
    </script>

    <div id="xycoordinates"></div>


</body>
</html>
kuronekonano
关注
  • 6
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
在网页上画一个矩形(HTML5 Canvas作图)
AI编程集团 金蝉脱壳的博客
08-13 1057
简化作图步骤，重写作图函数： function DrawRect(Canvas,A,C) { //画个矩形,“A、C”是对顶点 var p1,p2=new Array(2); p1=GetSmallest(A,C); p2=GetBiggest(A,C); with (Canvas)  {  rect(p1[0],p1[1],p2[0]-p1[0],p2[1]-p1[1]);
html中矩形坐标,js怎么根据坐标在图片上画出矩形框？
weixin_31067561的博客
06-09 2288
如图本地上传的图片，并点击获取到这个图片里每个地方的坐标，根据4个角坐标在图片上画出矩形框，该怎么画？大神支招。我图片是显示在div里的，是不是应该用canvas显示图片？代码：Document#box{width:448px;height: 300px;border:10px solid #ccc;text-align: center;/* border-radius:10px; */}#cro...
js实现在图片上画矩形框
weixin_34389926的博客
09-23 2607
2019独角兽企业重金招聘Python工程师标准>>> ...
用js绘制可视化矩形并获取矩形坐标
weixin_42602726的博客
02-11 439
你可以使用 HTML5 canvas 元素和 JavaScript 来实现绘制可视化矩形并获取矩形坐标。 在 HTML 代码中创建 canvas 元素： <canvasid="myCanvas" width="500" height="500"></canvas> ...
jquery 图片上画矩形
08-10
通过js的jquery类库，在选定的图片上花带颜色的矩形框，用于选定图片的固定部分使用，可获得XY轴坐标。
JS图片画方块定位坐标
weixin_30814329的博客
02-21 4684
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" width="600" he...
vue实现在图片中画矩形框,并得到对角坐标，设置map中area的样式.zip
05-28
vue实现在图片中画矩形框（JS图片画方块定位坐标）,并得到对角坐标，并拿到对应坐标制作图片热区并设置map中area的样式（图片热区map area的用法）
vue实现在图片中画矩形框,并得到图片中的对角坐标，测试可用版本
07-28
在Vue.js框架中实现图像上绘制矩形框并获取对角坐标的功能，是常见的图像处理需求，例如在图像标注、对象检测等应用场景中。本文将详细介绍如何在Vue项目中完成这个任务。 首先，我们需要了解Vue的基本概念。Vue.js...
javascript 绘制矩形框
10-30
### JavaScript 绘制矩形框知识点总结 #### 知识点概述 1. **JavaScript 绘制矩形框的基本思路：**...随着对知识的不断深入和实践，读者可以在此基础上增加更多功能，如改变矩形框的颜色、添加不同形状的图形绘制等。
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
10-17
在本篇文档中，介绍了如何在Vue项目中利用Canvas来绘制图片、矩形、线条以及文字，并提供了将Canvas中的内容导出为图片文件的方法。以下将详细介绍这些知识点。 ### Vue使用Canvas绘制图片 在Vue中使用Canvas绘制...
读取本地图片并在图片上画框返回坐标
01-12
安装opencv2.4.9后可以直接运行的mfc，可以实现读取本地图片显示在picture控件上，同时可以在显示图片上进行画框，同时返回画框的矩形的左上角右下角在照片上实际像素点的位置，我写的mfc读的是1920*1200的图片，图片尺寸可以自己改变。
网页在图片上画长方形和直线，并且能控制和编辑
baby_you_Know的博客
09-16 749
网页在图片上画长方形和直线，并且能控制和编辑网页在图片上画长方形和直线，并且能控制和编辑 网页在图片上画长方形和直线，并且能控制和编辑 工作上用到了 在一张图片上画正方形和直线。并且可以控制和编辑 Your browser does not support the canvas element. 长方形 直线 var c=document.getElementById(“my...
Canvas的使用，根据坐标在图片中画出矩形，框图
baichrn的博客
10-17 4050
通过使用canvas快速展示矩形框图坐标
设置图片热点链接以及获取图片上某个位置的坐标
.NET开发工程师吃瓜日常的日常
12-17 2217
如何设置图片热点链接： 有时候需要在一张图片上设置几个区域，鼠标点击图片的不同区域可以进入不同的页面，或者是点击图片的某一块区域进入某一个页面，这就是网页的热点链接。 1 <img src="test.jpg" usemap="#testmap" alt="test" /> 2 <map name="testmap" id="testmap"> 3 <ar...
用js语言输出矩形，三角形，菱形，九九乘法表
twilighbook的博客
09-12 1004
html根据像素坐标绘制矩形,HTML5中使用canvas绘制矩形
weixin_34552424的博客
05-31 425
canvas是HTML5中新增的一个元素，使用Canvas可以绘制任何你喜欢的图形。先来认识什么是Canvas？1.在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图像描绘。2. canvas通过JavaScript来绘制2D图形，它是逐像素进行渲染的。3.在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么...
7.15、HTML5画布（矩形和圆形）
sh2001824的博客
07-15 1245
HTML5画矩形和圆
给图片添加坐标信息
东方佑
03-09 573
【代码】给图片添加坐标信息。
实现video截图并且在canvas上绘制矩形
Billow_lamb的博客
10-29 856
实现video播放器截图并且在canvas上绘制矩形 只展示核心代码 安装 video-playe 全局引入 有可能代码复制不完全，逻辑不变 <div id="videoItem"> <video-player class="video-player vjs-custom-skin tine-font-size" ref="videoPlayer" :playsinline="true" :options="playerOptions"
javascript获取手指在画布中的坐标
最新发布
05-28
要获取手指在画布中的坐标，可以通过JavaScript中的touch事件来实现。具体实现步骤如下： 1. 获取画布元素： ``` var canvas = document.getElementById('canvas'); ``` 2. 绑定touch事件： ``` canvas.addEventListener('touchstart', handleTouchStart, false); canvas.addEventListener('touchmove', handleTouchMove, false); ``` 3. 在相应的touch事件处理函数中获取手指的坐标： ``` var touchX, touchY; function handleTouchStart(event) { event.preventDefault(); touchX = event.touches[0].pageX - canvas.offsetLeft; touchY = event.touches[0].pageY - canvas.offsetTop; } function handleTouchMove(event) { event.preventDefault(); touchX = event.touches[0].pageX - canvas.offsetLeft; touchY = event.touches[0].pageY - canvas.offsetTop; } ``` 在上面的代码中，我们通过event.touches来获取手指的信息，其中event.touches[0]表示第一个触摸点的信息。通过pageX和pageY属性可以获取手指在页面中的坐标，减去画布元素的offsetLeft和offsetTop可以得到手指在画布中的坐标。最后将获取到的坐标赋值给touchX和touchY变量即可。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值