jquery.imageLabel自定义添加编辑图片标注特效

jquery.imageLabel自定义添加编辑图片标注特效

这是一款非常好用的jquery.imageLabel自定义添加编辑图片标注文字插件,鼠标框选图片区域即可添加标注内容,在标注区域内点击鼠标右键可编辑或者删除标注,可添加多个文字标注,还可以随意拖动标注框的位置。

使用方法
在页面引入以下jquery.js和jquery.imageLabel.min.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="js/jquery.js"></script>
<script src="js/jquery.imageLabel.min.js"></script>
<script>
$(function() {
$(".right-select-box");
$(".addpic").removeAttr("disabled"), $("#imgform").submit(function(t) {
  t.preventDefault();
  window.c = imageLabel({
      img: $("[name=src]").val(),
      editPop: !0,
      close: function(t) {
          return t.length && alert(JSON.stringify(t)), !0
      },
      clickArea: function() {},
      edit: function(t) {},
      startArea: function() {},
      confirm: function(t) {
          return t.length && alert(JSON.stringify(t)), !0
      }
  })
})
})
</script>

Html结构
在页面插入form代码部分

1
2
3
4
5
<form action="" id="imgform">
  <p>图片链接:</p>
  <input type="text" name="src" value="build.jpg" style="display:block;width:100%;height:30px">
  <button class="addpic" type="submit" disabled="disabled" style="margin-top:10px;padding:10px;width:100%">点击标注图片</button>
</form>

文件信息:

    3

    发表评论