精华内容
下载资源
问答
  • 2021-02-12 23:10:26

    相对路径和绝对路径的区别

    在HTML里只要涉及文件的地方(如超级链接、图片等)就会涉及绝对路径与相对路径的概念。1.绝对路径

    绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下,那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。那么如果要使用绝对路径指定网页的背景图片就应该使用 以下语句:

    2.使用绝对路径的缺点

    事实上,在网页编程时,很少会使用绝对路径,如果使用“E:\book\网页布\代码\第2章\bg.jpg”来指定背景图片的位置,在自己的计算机上 浏览可能会一切正常,但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时,可能整个网站并没有放在Web服务器的E盘, 有可能是D盘或H盘。即使放在Web服务器的E盘里,Web服务器的E盘里也不一定会存在“E:\book\网页布局\代码\第2章”这个目录,因此在浏 览网页时是不会显示图片的。3.相对路径

    为了避免这种隋况发生,通常在网页里指定文件时,都会选择使用相对路径。所谓相对路径,就是相对于自己的目标文件位置。例如上面的例子,“s1.htm” 文件里引用了“bg.jpg”图片,由于“bg.jpg”图片相对于“s1.htm”来说,是在同一个目录的,那么要在“s1.htm”文件里使用以下代 码后,只要这两个文件的相对位置没有变(也就是说还是在同一个目录内),那么无论上传到Web服务器的哪个位置,在浏览器里都能正确地显示图片。

    再 举一个例子,假设“s1.htm”文件所在目录为“E:\book\网页布局\代码\第2章”,而“bg.jpg”图片所在目录为“E:\book\网页 布局\代码\第2章\img”,那么“bg.jpg”图片相对于“s1.htm”文件来说,是在其所在目录的“img”子目录里,则引用图片的语句应该 为:注意:相对路径使用“/”字符作为目录的分隔字符,而绝对路径可以使用“\”或“/”字符作为目录的分隔字符。由于“img”目录是“第2章”目录下的子目录,因此在“img”前不用再加上“/”字符。

    在 相对路径里常使用“../”来表示上一级目录。如果有多个上一级目录,可以使用多个“../”,例如“http://www.cnblogs.com/”代表上上级目录。假设 “s1.htm”文件所在目录为“E:\book\网页布局\代码\第2章”,而“bg.jpg”图片所在目录为“E:\book\网页布局\代码”,那 么“bg.jpg”图片相对于“s1.htm”文件来说,是在其所在目录的上级目录里,则引用图片的语句应该为:

    4.相对虚拟目录

    有关相对路径还有一个比较特殊的表示:“相对虚拟目录”。请看下面的例子:

    在这个例子里,background属性的值为“/img/bg.jpg”,注意在“img”前有一个“/”字符。这个“/”代表的是虚拟目录的根目录. 假设把“E:\book\网页布局\代码”设为虚拟目录,那么“/img/bg.jpg”的真实路径为“E:\book\网页布局\代码\img \bg.jpg”;如果把“E:\book\网页布局\代码\第2章”设为虚拟目录,那么“/img/bg.jpg”的真实路径为“E:\book\网页 布局\代码\第2章\img\bg.jpg”

    在jsp和class文件中调用的相对路径不同。

    在jsp里,根目录是WebRoot 在class文件中,根目录是WebRoot/WEB-INF/classes 当然你也可以用System.getProperty("user.dir")获取你工程的绝对路径。1.jsp中取得路径:

    以工程名为TEST为例:

    (1)得到包含工程名的当前页面全路径:request.getRequestURI()

    结果:/TEST/test.jsp

    (2)得到工程名:request.getContextPath()

    结果:/TEST

    (3)得到当前页面所在目录下全名称:request.getServletPath()

    结果:如果页面在jsp目录下/TEST/jsp/test.jsp

    (4)得到页面所在服务器的全路径:application.getRealPath("页面.jsp")

    结果:D:\resin\webapps\TEST\test.jsp

    (5)得到页面所在服务器的绝对路径:absPath=newjava.io.File(application.getRealPath(request.getRequestURI())).getParent();

    结果:D:\resin\webapps\TEST2.在类中取得路径:

    (1)类的绝对路径:Class.class.getClass().getResource("/").getPath()

    结果:/D:/TEST/WebRoot/WEB-INF/classes/pack/(2)得到工程的路径:System.getProperty("user.dir")

    结果:D:\TEST3.在Servlet中取得路径:

    (1)得到工程目录:request.getSession().getServletContext().getRealPath("") 参数可具体到包名。

    结果:E:\Tomcat\webapps\TEST

    (2)得到IE地址栏地址:request.getRequestURL()

    结果:http://localhost:8080/TEST/test

    (3)得到相对地址:request.getRequestURI()

    结果:/TEST/test

    另,Class类还有一个getResourceAsStream方法,记得以前有个项目要读取在同一个包内的一个xml,就用的这个。1.如何获得当前文件路径

    常用:

    (1).Test.class.getResource("")

    得到的是当前类FileTest.class文件的URI目录。不包括自己!

    (2).Test.class.getResource("/")

    得到的是当前的classpath的绝对URI。

    (3).Thread.currentThread().getContextClassLoader().getResource("")

    得到的也是当前ClassPath的绝对URI。

    (4).Test.class.getClassLoader().getResource("")

    得到的也是当前ClassPath的绝对URI。

    (5).ClassLoader.getSystemResource("")

    得到的也是当前ClassPath的绝对URI。

    尽量不要使用相对于System.getProperty("user.dir")当前用户目录的相对路径,后面可以看出得出结果五花八门。

    (6) new File("").getAbsolutePath()也可用。

    注:若这些路径中出现空格,并且空格被 代替,则可以使用path= java.net.URLDecoder.decode(path,"utf-8") 进行转化;2.Web服务器

    (1).Tomcat

    在类中输出System.getProperty("user.dir");显示的是%Tomcat_Home%/bin

    (2).Resin

    不是你的JSP放的相对路径,是JSP引擎执行这个JSP编译成Servlet的路径为根.比如用新建文件法测试File f= new File("a.htm");

    这个a.htm在resin的安装目录下

    (3).如何读文件

    使用ServletContext.getResourceAsStream()就可以

    (4).获得文件真实路径

    String file_real_path=ServletContext.getRealPath("mypath/filename");

    不建议使用request.getRealPath("/");

    更多相关内容
  • 主要介绍了Vue获取页面元素的相对位置的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • js中获取相对位置

    2014-01-26 22:13:01
    js中如何获取元素的相对位置,相对与浏览器
  • 一、通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head>...通过JS获取图片相对坐标位置</title&g...

    一、通过JS获取鼠标点击时图片的相对坐标位置

    源代码如下所示:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>通过JS获取图片的相对坐标位置</title>
     7 
     8     <style>
     9         body {margin: 0; padding: 0; }
    10         #area{width:300px;height:300px;}
    11         #area img{border:none;cursor:pointer;width: 300px;height: 300px;}
    12         .testBox {
    13             width: 200px;
    14             height: 200px;
    15             overflow: auto;
    16         }
    17     </style>
    18 </head>
    19 
    20 <body id="">
    21     <h3>通过JS获取图片的相对坐标位置 示例</h3>
    22     <div class="testBox">
    23         <div id="area" onclick="getClickPos(event);">
    24             <img id='imageID'   src="images/1.jpg">
    25         </div>
    26     </div>
    27 
    28 
    29     <script type="text/javascript">
    30         function getClickPos(e){
    31             var xPage = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;
    32             var yPage = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;
    33             identifyImage = document.getElementById("imageID");
    34             img_x = locationLeft(identifyImage);
    35             img_y = locationTop(identifyImage);
    36             var xPos = xPage-img_x;
    37             var yPos = yPage-img_y;
    38             alert('X : ' + xPos + '\n' + 'Y : ' + yPos);
    39         }
    40         //找到元素的屏幕位置
    41         function locationLeft(element){
    42             offsetTotal = element.offsetLeft;
    43             scrollTotal = 0; //element.scrollLeft but we dont want to deal with scrolling - already in page coords
    44             if (element.tagName != "BODY"){
    45                 if (element.offsetParent != null)
    46                     return offsetTotal+scrollTotal+locationLeft(element.offsetParent);
    47             }
    48             return offsetTotal+scrollTotal;
    49         }
    50         //find the screen location of an element
    51         function locationTop(element){
    52             offsetTotal = element.offsetTop;
    53             scrollTotal = 0; //element.scrollTop but we dont want to deal with scrolling - already in page coords
    54             if (element.tagName != "BODY"){
    55                 if (element.offsetParent != null)
    56                     return offsetTotal+scrollTotal+locationTop(element.offsetParent);
    57             }
    58             return offsetTotal+scrollTotal;
    59         }
    60     </script>
    61 </body>

     

    补充

     

    二、js图片上标注热点(相对定位)

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <style>
            .wrap{
                width:200px;
                height: 200px;
                overflow: auto;
                background: #ccc;
                position: relative;
            }
            .ball{
                width:20px;
                height: 20px;
                background: red;
                border-radius: 50%;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="images/1.jpg" alt="">
        </div>
        <script>
            $('.wrap').click(function(e){
                var radius=10;//半径
                var offset=$(this).offset();
                var top=e.pageY-offset.top-radius+"px";
                var left=e.pageX-offset.left-radius+"px";
                console.log(top);
                console.log(left);
                $('.wrap').append('<div class="ball" style="top:'+top+';left:'+left+'"></div>')
            })
        </script>
    </body>
    </html>
    

      

    转载于:https://www.cnblogs.com/jialinG/p/7851828.html

    展开全文
  • IDEA如何快速获取图片相对路径

    千次阅读 2021-05-20 17:16:12
    IDEA如何快速获取图片相对路径 在某些时候,经常会用到文件相对路径,但资源文件对当前代码文件的相对路径并不能直接找到,而是根据经验书写路径。下面介绍一种方法可以快速获取到目标文件的相对路径 首先将目标...

    IDEA如何快速获取图片相对路径

    在某些时候,经常会用到文件相对路径,但资源文件对当前代码文件的相对路径并不能直接找到,而是根据经验书写路径。下面介绍一种方法可以快速获取到目标文件的相对路径

    1. 首先将目标文件放到你明确知道相对路径的位置(例如当前文件夹)下面是例子在这里插入图片描述文件目录(media.jpg为目标文件)

    2. 在代码中填写该图片路径(idea中会有提示)

    3. 拖动目标文件到你想放的位置
      在这里插入图片描述

    4. 点击Refactor
      在这里插入图片描述

    5. 最后就会发现原来代码的路径发生了改变,这样就获得了想要文件的相对路径。(此方法适用于高智能的工具)
      在这里插入图片描述

      第一次写文章,感谢各位的阅读

    展开全文
  • 本来想用图片的热区useMap实现,但发现useMap只支持href跳转属性,不能添加自定义的内容。最后通过网上搜索方案,找到如下解决方法。 在点击图片时,通过鼠标点击位置计算点击的坐标,然后在点击的位置添加自定义...

        因功能需要在图片上点击时,添加自定义的内容。本来想用图片的热区useMap实现,但发现useMap只支持href跳转属性,不能添加自定义的内容。最后通过网上搜索方案,找到如下解决方法。

        在点击图片时,通过鼠标点击位置计算点击的坐标,然后在点击的位置添加自定义内容。

        示例代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <base target="_self">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache,must-ridate">
        <meta http-equiv="expires" content="0">
        <script src="./plugins/jquery/jquery.min.js"></script>
    </head>
    <body>
    <div class="container">
        <img id="imageId" src="./images/1.jpg" οnclick="handleClick(event)">
    </div>
    </body>
    <script>
        // 取图片鼠标点击位置
        function handleClick(e) {
            var xPage = (navigator.appName == 'Netscape') ? e.pageX : event.x + document.body.scrollLeft;
            var yPage = (navigator.appName == 'Netscape') ? e.pageY : event.y + document.body.scrollTop;
            imgEl = document.getElementById("imageId");
            img_x = locationLeft(imgEl);
            img_y = locationTop(imgEl);
            var xPos = xPage - img_x;
            var yPos = yPage - img_y;
    
            // 当前点击位置
            var hotspot = {x: xPos, y: yPos};
            addHotspot(hotspot);
        }
    
        // 找到元素的屏幕位置
        function locationLeft(element) {
            var offsetTotal = element.offsetLeft;
            var scrollTotal = 0; // element.scrollLeft but we dont want to deal with scrolling - already in page coords
            if (element.tagName != "BODY") {
                if (element.offsetParent != null)
                    return offsetTotal + scrollTotal + locationLeft(element.offsetParent);
            }
            return offsetTotal + scrollTotal;
        }
    
        // 找到元素的屏幕位置
        function locationTop(element) {
            var offsetTotal = element.offsetTop;
            var scrollTotal = 0; // element.scrollTop but we dont want to deal with scrolling - already in page coords
            if (element.tagName != "BODY") {
                if (element.offsetParent != null)
                    return offsetTotal + scrollTotal + locationTop(element.offsetParent);
            }
            return offsetTotal + scrollTotal;
        }
    
        // 添加自定义内容
        function addHotspot(hotspot) {
            var x = hotspot.x - 12;
            var y = hotspot.y - 12;
            var src = '/images/p.png';
    
            imgEle = '<img ' + ' src="' + src + '"  style="top: '
                + y + 'px; left: ' + x + 'px; position: absolute; cursor: pointer;"'
                + ')" />';
            $('.container').append(imgEle);
        }
    </script>
    </html>

         效果图如下(定位点为添加的自定义图片):

        1-201110115451537.png

     

    展开全文
  • 页面JS方法获取图片中的相对坐标

    千次阅读 2020-05-29 19:13:35
    一、页面运行,点击图片中的某个点,弹窗提示这个点在图片中的坐标信息 <!... <... ...图片相对坐标</title> </head> <body> <div style="position:absolute;top:50px;left:250
  • xy, (x+10, y-10), cv2.FONT_HERSHEY_PLAIN, 2, (0, 255, 0), thickness=1) cv2.imshow("image", img1) # 显示坐标 def get_coordinate_by_click(img_path): global img img = cv2.imread(img_path) # 图片路径 cv2...
  • import cv2 import aircv as ac import pyautogui import matplotlib.pyplot as plt import numpy # print circle_center_pos def draw_circle(img, pos, circle_radius, color, line_width): ...
  • vue 组件中图片地址,图片获取

    千次阅读 2018-05-05 03:54:03
    前提:在组件中使用引用图片,用于&lt;img src&gt; 或者 背景图片background;当我们利用vue-cli 搭建好项目的框架,开始高高兴兴开发组件的时候,有的时候想加一张图片,或者在样式中加个背景,会发现,...
  • 相对位置:相对于应用程序原点(0,0)的位置 坐标系   在讨论各种位置之前,我们需要了解电脑桌面坐标系、应用程序坐标系。一般都是规定左上角为坐标原点,水平向右为x正,竖直向下为y正,如下图:   比如我的...
  • 实际上获取的是绝对路径,不过通过浏览器查看到的不会是绝对路径,而是被浏览器保护好,给你看到的一个假的路径,而我们要做的就是获取图片的名字即可,人为的添加一个路径,同时写入到数据库中一个相对路径即可 ...
  • 一、通过JS获取鼠标点击时图片相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <...
  • Qt获取鼠标位置(绝对位置、相对位置

    万次阅读 多人点赞 2016-04-01 11:46:02
    在进行界面编程时,经常需要获取鼠标的位置,特别是需要知道鼠标在界面上某个控件的相对位置。在Qt其实获取这几种位置还是比较简单的。首先我们需要了解Qt的坐标系统,Qt的坐标系统是有QPainter类控制的,而QPainter...
  • 在web开发中,碰到数据库保存图片路径为相对路径(如:/image/60123200007.jpg),图片放置位置实际为本项目的根目录上(跟src同级,原因:避免项目清除缓存时,重新部署误删); 本人是利用服务器Tomcat的docBase...
  • 1、界面位置介绍 x()、y()和pos()函数的作用都是获得整个窗体左上角的坐标位置。 frameGeometry()与geometry()相对应。frameGeometry()是获得整个窗体的左上顶点和长、宽值,而geometry()函数获得的是窗体内中央...
  • 获取元素在页面中的位置: 绝对定位:到body的距离 相对定位:到视口的距离 绝对定位可以用以下封装的函数进行取值: function getPointAb(node){ var x = 0; var y = 0; while(node){ x += node.offsetLeft; y += ...
  • C#获取相对路径的方法

    千次阅读 2018-08-15 18:36:56
    C#获取相对路径的八种方法 C#获取相对路径1.  获取和设置当前目录的完全限定路径。  string str = System.Environment.CurrentDirectory; Result: C:xxxxxx   C#获取相对路径2.  获取启动了应用程序的可执行文件...
  • java解析docx获取文字图片并识别图片准确位置需求简述功能模块版本1生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的...
  • 微信小程序-获取图片主色调

    千次阅读 2020-03-29 17:23:12
    写在前面 是的我要开始做:根据图片的主色调来改变一下页面背景颜色了?...通过canvas的getImageData获取图片的像素数据 canvas 2d 与旧版 canvas 将网络图片绘制进canvas的两种方法实践 分析目前主要用于...
  • js在获取图片的src是相对路径

    千次阅读 2014-10-10 11:06:25
    js在获取src时或同时获取到域名路径;如
  • django获取图片/文件路径

    千次阅读 2019-04-23 00:10:50
    使用django给前端返回json数据时,对于图片的处理时常返回图片的url地址,android端使用图片加载框架加载图片. django返回图片url地址: class UserInfo(models.Model): username = models.CharField(max_length=20,...
  • Java获取文件路径的几种方式

    千次阅读 2021-02-12 14:35:11
    关于绝对路径和相对路径: 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径)例如:C:xyz est.txt 代表了test.txt文件的绝对路径。http://www.sun.com/index.htm也代表了一个URL绝对路径。相 ...
  • Python获取绝对路径 先说一下python获取当前运行文件绝对路径的方法。 styleSheet"相对"路径加载图片 styleSheet用相对路径我是怎么试都不管用。...我先获取到运行文件的决定位置,再根据相对路径合成新的路径。
  • js获取鼠标点击事件的相对位置

    千次阅读 2014-11-12 08:52:24
    比如一张图片位于你网页中,需要实现 滚动条效果 获取相对图片we
  • /*获取文件是否为图片,如果能够正常的获取到一张图片的宽高属性, 那肯定这是一张图片,因为非图片文件是获取不到它的宽高属性的*/ if(bi == null || bi.getHeight() || bi.getWidth() ){ label....
  • 3.根据UI位置获取屏幕图片 首先要获取UI左下角位置与宽高,并根据宽高偏移量计算识别区域大小 //位置参数 public int width; public int height; //二维码识别,要比图片框住的大一些,因此可以加一些...
  • Python pygame实时获取鼠标位置坐标

    千次阅读 2022-03-07 17:21:45
    鼠标点击获取坐标很简单 ...鼠标实时获取坐标 MOUSEMOTION:鼠标移动 while True: for event in pygame.event.get(): if event.type == pygame.MOUSEMOTION: print(event.pos) # 当前在屏幕中的坐标 ...
  • vue定位 获取用户位置信息

    万次阅读 2019-07-04 10:17:43
    关于定位功能尝试了很多种方法,h5定位,百度地图定位,高德地图定位,因为ip定位只能定位到城市,所以我选用的是浏览器定位。...百度定位:定位的位置与实际位置偏差太大,我从郑州的一个小县城定位到了...
  • vue 拖拽小图标获取坐标位置

    千次阅读 2020-11-24 15:48:51
    遇到一个功能,在固定的一张图或者说一个框内有一个小图标可以拖拽,并且能拿到他当前位置的坐标,如下图 二维码小图标代码如下 <!-- 拖拽小图标 v-drag:拖拽效果,配置当前元素position: absolute;并配置vue的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 112,491
精华内容 44,996
关键字:

获取图片相对位置

友情链接: _alarm.rar