这是一款非常好用的jquery.imageLabel自定义添加编辑图片标注文字插件,鼠标框选图片区域即可添加标注内容,在标注区域内点击鼠标右键可编辑或者删除标注,可添加多个文字标注,还可以随意拖动标注框的位置。
使用方法
在页面引入以下jquery.js和jquery.imageLabel.min.js文件
<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代码部分
<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>