精华内容
下载资源
问答
  • jQuery自定义图片上做标记代码 jQuery自定义图片上做标记代码
  • Graphics在图片上标注

    2013-11-28 23:08:25
    Graphics在图片上做标注,简单的写了个基类和两个图形类,支持图形修改 主要是给论坛里提问题的朋友看一下
  • 如下图所示,在图片上做标记,如圆形、矩形等。 该demo实现画布页面布局中缩放后居中显示,可拖拽、缩放、做标记说明。 项目下载地址:https://gitlab.com/zhangcw66/draw_mark 如粘贴以下代码,请安装zrender &...

    如下图所示,在图片上做标记,如圆形、矩形等。

    该demo实现画布在页面布局中缩放后居中显示,可拖拽、缩放、做标记说明。

    项目下载地址:https://gitlab.com/zhangcw66/draw_mark
    在这里插入图片描述
    如粘贴以下代码,请安装zrender

    <template>
    <div class="draw-mark">
      <div id="canvas" style="height:710px;background-color:#F5F5F5"></div>
    </div>
    </template>
    
    <script>
    import zrender from 'zrender'
    export default {
      name: 'DrawMark',
      data() {
        return {
          imgSrc: require('@/assets/timg.jpg'),
          markInfo: [[440, 260],[590, 360],[770, 370]],
          isShowPoint: true,
    
          zr: {},
          // zrender group实例
          group: {},
          imgWidth: 0, // 大图宽度
          imgHeight: 0, // 大图高度
          whRatio: 0, // 大图比例
          frameScale: 0, // 缩放比
          subSet: [], // 存放已经绘画完成的矩形框信息
          circle: {},
          scale: 1,
          scaleMax: 15, // 最大比例
          scaleMin: 0.5 // 最小比例
        }
      },
      mounted() {
        this.initCanvas()
      },
      methods: {
        // 初始化画布绘制图片
        initCanvas() {
          const vm = this
          // 获取放置画布的元素
          const container = document.getElementById('canvas')
          // 初始化zr实例 zrender容器
          vm.zr = zrender.init(container)
          vm.group = new zrender.Group({
            slient: true // 组内子孙元素是否响应鼠标事件
          })
          // 创建图片对象
          const imgs = new Image()
          // 图片的src等于大图的地址
          imgs.crossOrigin = 'Anonymous'
          imgs.setAttribute('crossOrigin', 'Anonymous')
          imgs.src = this.imgSrc
          imgs.onerror = _ => {
            this.$message.error('图片加载失败!')
            return false
          }
          // 图片加载成功后
          imgs.onload = () => {
            const canvasWidth = container.clientWidth
            const canvasHeight = container.clientHeight
            // 画布宽高比
            const canvasRatio = canvasWidth / canvasHeight
            // 图片的宽高比
            vm.whRatio = imgs.width / imgs.height
            const originalHeight = imgs.height
            // 图片相对于画布的尺寸进行调整
            // 如果图片的宽高比大于画布的宽高比
            if (vm.whRatio > canvasRatio) {
              imgs.width = canvasWidth
              imgs.height = imgs.width / vm.whRatio
            } else {
              imgs.height = canvasHeight
              imgs.width = imgs.height * vm.whRatio
            }
            // 对图片的宽高进行调整
            vm.imgWidth = imgs.width
            vm.imgHeight = imgs.height
            vm.frameScale = originalHeight / vm.imgHeight
            // 绘制图片
            const myImg = new zrender.Image({
              style: {
                image: this.imgSrc,
                x: 0,
                y: 0,
                width: vm.imgWidth,
                height: vm.imgHeight
              },
              z: 1,
              onmouseover: _ => {
                document.body.style.overflowY = 'hidden'
              },
              onmousewheel: _ => {
                document.body.style.overflowY = 'hidden'
              },
              onmouseout: item => {
                document.body.style.overflowY = ''
              }
            })
            // 将图片绘制至子节点中
            vm.group.add(myImg)
            // 调整图片在canvas中的位置
            if (vm.zr.getWidth() > vm.imgWidth) {
              vm.group.position[0] = (vm.zr.getWidth() - vm.imgWidth) / 2
            }
            if (vm.zr.getHeight() > vm.imgHeight) {
              vm.group.position[1] = (vm.zr.getHeight() - vm.imgHeight) / 2
            }
            // 将子节点添加至画布中
            vm.zr.add(vm.group)
            // 绘制mark
            this.markInfo.forEach((item, index) => {
              const opt = {
                stroke: '#f00',
                pointsSet: this.AssemblyData(item),
                id: index
              }
              vm.drawMark(opt)
            })
            // 调用鼠标的滚动事件
            vm.handleZoom()
            // 调用鼠标的拖拽事件
            vm.handleDrop()
          }
        },
        // 坐标框的转换
        AssemblyData(item) {
          let newArr = item
          const arr = newArr.map(item => {
            return Math.round(item /= this.frameScale)
          })
          return arr
        },
        // 画标记
        drawMark(opt) {
          const vm = this
          // vm.subSet = []
          vm.circle = new zrender.Circle({
            style: {
              stroke: opt.stroke || '#f00',
              fill: opt.stroke || '#f00',
              text: this.isShowPoint ? opt.id : null,
              textHeight: 6,
              textWidth: 6,
              fontWeight: 700,
              textPosition: [2, -11],
              textLineWidth: 2,
              textPadding: 1,
              fontSize: 12,
              textFill: opt.stroke || '#fff'
    
            },
            shape: {
              cx: opt.pointsSet[0],
              cy: opt.pointsSet[1],
              r: 3
            },
            hoverable: true,
            z: 2
          })
          vm.subSet.push(vm.circle)
          vm.group.add(vm.circle)
        },
        // 滚动缩放
        handleZoom() {
          const vm = this
          // 在画布子节点上监听鼠标滚轮事件  事件对象
          vm.group.on('mousewheel', ev => {
            // wheeldata 返回值说明:正值向上滚动,负值向下滚动 均为120的倍数 缩小20倍 结果可能是 +e.wheelDelta/20 或者是 -e.wheelData/20
            // 缩小20倍数 调整为10
            // 监听到鼠标再
            const e = (ev || event).wheelDelta / 60
            // scale原始的缩放比例是1 每次滚动在这个基础上加上或者减去滚轮缩放后的数据
            vm.scale += e
            // 调用缩放的函数 将缩放的比例传入
            vm.setScale(vm.scale)
          })
        },
    
        /** * 缩放 */
        setScale(scale, item) {
          if (scale > this.scaleMax) {
            scale = this.scaleMax
          } else if (scale < this.scaleMin) {
            scale = this.scaleMin
          }
          this.scale = scale
          this.group.attr({
            scale: [this.scale, this.scale],
            origin: [this.zr.getWidth() / 5, this.zr.getHeight() / 5]
          })
        },
        // 拖拽
        handleDrop() {
          const vm = this
          vm.zr.dragData = {
            drag: false,
            pos: [0, 0],
            group: null,
            target: null
          }
          vm.zr.on('mousedown', e => {
            // 画布拖拽的起始位置是 事件对象中的画布的坐标位置
            vm.zr.dragData.pos = [e.event.zrX, e.event.zrY]
            // 画布的拖拽目标
            vm.zr.dragData.target = e.target
            if (e.target === undefined) {
              // !!!
              vm.zr.dragData.drag = false
            } else if (e.target.parent && e.target.parent.type === 'group') {
              vm.zr.dragData.drag = true
              vm.zr.dragData.group = e.target.parent
            }
          })
          // 鼠标抬起事件 关闭拖拽  将拖拽的目标元素设置为空
          vm.zr.on('mouseup', e => {
            vm.zr.dragData.drag = false
            vm.zr.dragData.group = null
          })
          // 鼠标移出事件 关闭拖拽
          vm.zr.on('mouseout', e => {
            vm.zr.dragData.drag = false
            vm.zr.dragData.group = null
          })
          // 鼠标移动事件
          vm.zr.on('mousemove', e => {
            if (vm.zr.dragData.drag !== true) return
            const new_pos = [e.event.zrX, e.event.zrY]
            if (vm.zr.dragData.group != null) {
              var pos = [
                new_pos[0] - vm.zr.dragData.pos[0],
                new_pos[1] - vm.zr.dragData.pos[1]
              ]
              vm.zr.dragData.group.children().forEach(x => {
                x.position = [0, 0]
              })
              vm.zr.dragData.group.position[0] += pos[0]
              vm.zr.dragData.group.position[1] += pos[1]
              vm.zr.dragData.group.dirty()
            } else {
              // eslint-disable-next-line no-redeclare
              var pos = [
                new_pos[0] - vm.zr.dragData.pos[0],
                new_pos[1] - vm.zr.dragData.pos[1]
              ]
              vm.zr.storage.getDisplayList(true, true).forEach(x => {
                x.position[0] += pos[0]
                x.position[1] += pos[1]
                x.dirty()
              })
            }
            vm.zr.dragData.pos = [e.event.zrX, e.event.zrY]
          })
        }
      }
    }
    </script>
    <style scoped>
    .draw-mark {
      padding: 30px;
    }
    </style>
    
    展开全文
  • 测试图片标记<!--#container{ position:relative; width:400px; height:300px; border:1px solid #CCC; overflow:hidden;}#map{ position:absolute;}.mark{ position:absolute; width:

    其中,标记点暂存在cookie里,需要保存数据库的另作修改。

    展开全文
  • 图片上添加标记

    热门讨论 2012-08-31 15:34:04
    图片上添加标记,非常不错,信不信由你,反正我是信了
  • 我想利用java,一张地图图片上添加标记,请大家给点思路,谢谢
  • 在图片上做标签,图片可放大缩小

    千次阅读 2018-05-07 14:39:33
    最近有个功能需要标记出没张图里脸部,并且点击大图后,...首先这里先借鉴了下前辈的在图片上做标签,此感谢无缘公子。 梳理功能以后,首先你要知道。后台返回的数据,包括 左上角坐标点 和 右下角坐标点。同...

    最近有个功能需要标记出没张图里脸部,并且点击大图后,图片可以缩放,标记也会跟着移动。有点类似地图tag

    眼见为实,先上一张效果图:

     

     

    由于最近项目已经完成差不多,在这段时间里把觉得有质量的功能拿出来和小伙伴们一起分享。

    首先这里先借鉴了下前辈的在图片上做标签,在此感谢无缘公子。

     

    梳理功能以后,首先你要知道。后台返回的数据,包括 左上角坐标点    和  右下角坐标点。同时还有图片长宽。

     

    知道这些以后,那么我们往下面看。

    根据在图片上做标签的思路,就是自定义View,在imageView上铺上一层标记层。在项目中,ImageLayout类。

    当然 告诉你坐标点,和原图大小。其实就是做一个初中的几何题目。只不过难的是坐标图在手机上。

    手机默认横向右为x正坐标,竖向下为y正坐标。

     

    这里要明确。大图,宽设置为满屏。这里的原图相对手机屏幕的比例出来了  

    scale = pic_with / screenWith

    然后根据这个比例算出,左上角点右下角 2个点在 手机屏幕的实际位置

    int tempX = point_left_x * screenWith/ pic_with ;

    int tempY = point_left_y * screenHeight/ pic_height ;

     //正确的坐标  左上角
    int trueX = left + tempX;

    int trueY = top + tempY;

    这里列举了左上角的点。

     

    知道了点以后,new ImageView然后加入到你的标记层。

     

    //左上角的点
    ImageView imageView_top_left = new ImageView(getContext());
    LayoutParams leoParams_top_left = new LayoutParams(layoutParams.WRAP_CONTENT, layoutParams.WRAP_CONTENT);
    leoParams_top_left.leftMargin = trueX;
    leoParams_top_left.topMargin = trueY;
    imageView_top_left.setImageResource(R.mipmap.left_top);

     

    layouPoints.addView(imageView_top_left, leoParams_top_left);

    看到这里是不是都已经明白了。

    当然我这里是标记脸4个点,知道左上和右下,已经确定了4个点。

     

    说到这里,你会问。图片缩放呢。那么接下来页是本文的重点

    首先感谢一开元控件photoView  github地址

    这个开源控件支持缩放,支持翻转。支持小图到大图动画。个人感觉还不错。

    关键是里面有个监听方法,监听当前ImageView缩小 还是放大

    executeTranslate

     

    监听返回的是一个RectF对象,经过大量测试发现,这个就是你设置的图片在手机窗口的实际坐标。记住是手机窗口  并非手机屏幕。是不是有点糊涂,我们可以理解为就是超出手机屏幕外的。

    在photoView源码里写一个接口,将Recf拿出来。同时重新绘制标记层,代码如下:

     

    imgBg.setOnMatrixChangeListener(new OnMatrixChangedListener() {
        @Override
        public void onMatrixChanged(RectF rect) {
            Log.e("是不是有了",rect.toString()+"");
            Info info = PhotoView.getImageViewInfo(imgBg);
            int left = (int) info.getmImgRect().left;
            int top = (int) info.getmImgRect().top;
            int right = (int) info.getmImgRect().right;
            int bottom = (int) info.getmImgRect().bottom;
            addPoints(left,top,right,bottom);
        }
    });

     

    自此整个功能,基本已经完成。

     

    如果还不明白,大家可以深入去了解photoView整个控件、

    当然点击事件的话,点击图片和电解标签。项目里都有备注的、如果对你有帮助,请帮忙star下吧

     

    大神勿喷,支持原创!最后附上源码 源码下载

     

    github地址

     

    展开全文
  • 利用opencv实现在图片上标注文字,文字颜色等可选
  • 用户在图片上标记某个点,注意是相对于该图片的绝对位置, 即使是浏览器页面窗口大小的改变的情况下,该标记点相对于图片的位置也不会改变。(jquery.ipicture.js不到该功能) 将标记点位置保存到数据库,下次能...

    说明

    用户在图片上标记某个点,注意是相对于该图片的绝对位置,
    即使是在浏览器页面窗口大小的改变的情况下,该标记点相对于图片的位置也不会改变。(jquery.ipicture.js做不到该功能)
    将标记点位置保存到数据库,下次能在图片相应位置展示出来。
    本demo中的css是用scss写的,注意变通。
    

    演示链接

    html代码

     <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>图片热点问题</title>
      <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    </head>
    <body>
      <div class="wrap">
        <img src="http://files.wmxa.cn/j1/190504/233AG130-6.bmy" alt="刘亦菲">
        <!--图片是网络图片,可替换成其他图片-->
      </div>
    </body>
    </html>
    
    

    css 注意是用scss语法实现的!!

    直接引用scss样式是不能实现样式效果的。

    /* scss样式文件 */
    html,body{
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      text-align: center;
    }
    
    .wrap{
      display: inline-block;
      position: relative;
      box-shadow: 0 0 4px #C79F5A;
    
      span{
        display: inline-block;
      }
    
      span.red-ball{
        position: absolute;
        background-color: #EF6191;
        opacity: .7;
        border-radius: 100%;
        transition: .4s;
    
        &:hover{
          opacity: 1;
        }
      }
    }
    
    

    css样式文件

    将上面的scss代码转换成css样式代码,如下:
    该css样式可以直接在html中使用,并能正常显示效果

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      text-align: center;
    }
    
    .wrap {
      display: inline-block;
      position: relative;
      box-shadow: 0 0 4px #C79F5A;
    }
    .wrap span {
      display: inline-block;
    }
    .wrap span.red-ball {
      position: absolute;
      background-color: #EF6191;
      opacity: 0.7;
      border-radius: 100%;
      transition: 0.4s;
    }
    .wrap span.red-ball:hover {
      opacity: 1;
    }
    

    js代码

    $(function () {
     alert("注意该demo的样式是用SCSS实现的!!!");
          function setRedBall(r) {
            var $wrap = $('.wrap');
            var radius = r;
            var w = radius * 2;
            var h = radius * 2;
            var x, y, offset;
    
            return function (e) {
              offset = $(this).offset();
              x = e.pageX - offset.left;
              y = e.pageY - offset.top;
    
              $('<span class="red-ball">').css({
                left: x - radius,
                top: y - radius,
                width: w,
                height: h
              }).appendTo(this);          
              
              alert("弹窗展示鼠标点击在图片的位置");
              alert("x:"+x);
              alert("y:"+y);
              alert("利用css显示样式,或者存入数据库");
            }
           
          }
    
          $('.wrap').on('click', setRedBall(20));
     
        })
    

    改进例子

    图片会随着页面的不同,图片大小也不同。这是要经过相对于图片的比例来转换。实现标记点不随图片大小的改动而造成位置偏移。
    

    演示例子
    注意图片的x,y。
    在这里插入图片描述

    <html lang="en">
    <head>
    	
    	<script type="text/javascript" src="js/jquery.min.js" ></script>
      <meta charset="UTF-8">
      <title>图片热点问题</title>
      <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    
     <style>
        .img{position:relative;border:solid 1px #000;display:inline-block;margin:100px 100px}
        .img .marker{position:absolute;width:20px;height:20px;background:#f00;}
    </style>
    
    </head>
    <body>
     
      <p>点击第1个刘亦菲</p> 
    <div class="img" id="dv">
        <img  id="LiuYiFeiImg" src="http://n.sinaimg.cn/fashion/transform/302/w472h630/20190506/ad3a-hwfpcxp2797029.jpg"></div>
        
        <p>在第2个小刘亦菲上做点标记</p> 
    <div class="img" id="dv2">
        <img  id="SmallLiuYiFeiImg" src="http://n.sinaimg.cn/fashion/transform/302/w472h630/20190506/ad3a-hwfpcxp2797029.jpg" width="300px" height="400px"></div>
    </body>
    </html>
    
     <script type="text/javascript">
     	var ProportionHeightInImg; //鼠标所选位置相对于所选图片高度的比例
     	var ProportionWidthInImg;//鼠标所选位置相对于所选图片宽度的比例
        function createMarker(x, y,divName) {
            var div = document.createElement('div');
            div.className = 'marker'; div.style.left = x + 'px'; div.style.top = y + 'px';
            document.getElementById(divName).appendChild(div)
        }
        
        
        
        document.getElementById('dv').onclick = function (e) {
            e = e || window.event;
            var x = e.offsetX || e.layerX, y = e.offsetY || e.layerY;
            createMarker(x, y,'dv');
            
            //获取图片的高度和宽度
           var myImg = document.querySelector("#LiuYiFeiImg");
                var currWidth = myImg.clientWidth;
                var currHeight = myImg.clientHeight;
                alert("图片高度:"+currHeight);
                alert("图片宽度:"+currWidth);
              ProportionWidthInImg=x/currWidth;
              ProportionHeightInImg=y/currHeight;
               alert("图片比例高度:"+ProportionHeightInImg);
              alert("图片比例宽度:"+ProportionWidthInImg);
              MarkSmallImg();
              
        }
     
    function MarkSmallImg()
    {
    	var myImg = document.querySelector("#SmallLiuYiFeiImg");
                var currWidth = myImg.clientWidth;
                var currHeight = myImg.clientHeight;
                alert("图片高度:"+currHeight);
                alert("图片宽度:"+currWidth);
                
                //给第二个刘亦菲加标记点
                var x=currWidth*ProportionWidthInImg;
                var y=currHeight*ProportionHeightInImg;
                 createMarker(x, y,'dv2');
            
    }
    
    
     
    
      </script>
    </html>
    
    
    展开全文
  • 有时候想判断自己数据集标注的是否准确,那么可以根据xml文件中的坐标和图片信息,在图片上把目标框出来,另存到另一个文件夹中。由于数据集一般是很多图片,所以我选择了批量处理的方式进行标注。 # -*- coding: ...
  • python实现在图片上画框并标注

    千次阅读 2021-03-24 13:54:27
    1.实现效果 2.代码 import cv2 fname = './data_set/face_detection/WIDER_...# 画矩形框 距离靠左靠的位置 pt1 = (651, 460) #左边,上边 #数1 , 数2 pt2 = (180+651, 462+227) #右边,下边 #数1+数3,...
  • 网上大多数都是用的ginput()和getpts()两个函数,getpts()标注出点太丑,而且十字光标也对眼睛不是很友好,所以采用了ginput(), 但发现十字光标太大,同时黑线太黑(我自己的图片就本来很黑,这样一来更黑了,根本...
  • android图片标记

    2017-02-18 18:50:56
    android图片标记,涂鸦,支持在图片上画线,画椭圆,方形等,支持撤销,恢复,保存
  • 经常imshow一幅图片之后,会上面plot一些标记点,但是imwrite的时候发现点并没有随之被保存下来。 尝试一些方法如下: 一、figure imshow(image0_rgb) hold on plot(loc0(:,2),loc0(:,1),'r+') gfframe=...
  • 因为最近要一个有关图片标记的网站,所以需要找一个可以达到下图效果的插件,但是找了好多天都没有头绪,哪位大神看到过类似的插件,可否推荐一下,非常感谢![图片说明]...
  • 在图片上画出标注目标框和类别python程序,还是比较简单的,直接一份代码: #!/usr/bin/python # -*- coding: UTF-8 -*- # 2018/07/11 by DQ import cv2 import os try: import xml.etree.cElementTree as ET...
  • 将json的标注文件的bbox显示在图片上

    千次阅读 2019-07-18 21:10:29
    将自己需要显示的图片image_id成一个txt文件如下图所示: 就是把图片的image_id罗列txt文件里面就可以了 2.准备好json的标注文件 3. 使用以下代码 from pycocotools.coco import COCO import cv2 ...
  • 最近做个项目,要可放大缩小的图上做标签。类似地图上的tag
  • html上做一个类似百度地图一样的网页,用鼠标点击图片(地图)某个位置,标记出来,再点击另外一个位置也标记出来,但是前一个标记不取消,怎么做到取消呢,每次点击都是一个位置显示出来 ``` html,body{...
  • 所以写了一个代码,通过在图片上绘制标注框来直观地判断标注文件是否存在问题,也可以绘制经过网络预测之后的box框。 参考文档:python读取数据集并生成txt文件 一、文件路径 # -*- coding:utf-8 -*- import os ...
  • 我现在要的是有一张图片是一张地图,我要地图上标记出企业的位置,并保存,下次打开地图时候,能显示出标记好的所有企业,并可修改或者继续添加企业标于地上,知道的或者的过,帮我顶顶,说说思路也行,...
  • JavaScript实现图片上标记多点区域

    千次阅读 2015-06-05 13:40:48
    测试图片标记 #container{  position:relative; width:400px; height:300px; border:1px solid #CCC; overflow:hidden; } #map{  position:absolute; } .mark{  position:absolute; width:2px; height:
  • jQuery自定义标注图片代码是一款支持自定义图片的任何位置标注说明代码。
  • //图片路径  BufferedImage image = ImageIO.read(new File("d:\\test.jpg"));  Graphics g = image.getGraphics();  g.setColor(Color.RED);//画笔颜色  g.drawRect(100, 100, 100, 100);//矩形框...
  • 不同于 iOS 平台上图片标注类应用百花齐放的局面,Android 平台「能用」的图片标注应用少之又少,功能全面、体验优秀的更是凤毛麟角。 因此如果你也苦寻一款好用、高效且功能丰富,支持高亮、打码、笔刷甚至...
  • Android 在图片的指定位置添加标记

    万次阅读 热门讨论 2016-08-03 21:42:47
    有时候,我们需要在图片的固定位置添加标签、标记物等,比如有这样的场景:假设有一个家居图片图片里,有各样的家居用品: 桌子,毛巾,花瓶等等, 我们指定的商品处添加标记,方便用户直接看到商品。
  • javascript插件:jquery.ipicture.js地图上做标记并可以用图文及链接展示(非常棒!)
  • from pycocotools.coco import COCO import cv2 import pandas as pd def showNimages(imageidFile, annFile, imageFile, ... :param imageidFile: 要查看的图片imageid,存储一列csv文件里 (目前设计的ima...
  • 这篇是一个自己的读取下来的记录,附上代码,目前只可以一张一张的图片进行处理,批处理的可以自己改动 #导入库 import json import numpy as np import json import cv2 import os import matplotlib.pyplot as ...
  • 包含:图片在canvas中移动、canvas上面进行标注、放大等 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 398,217
精华内容 159,286
关键字:

如何在图片上做标注