当前位置: 首页 > 工具软件 > Img Notes > 使用案例 >

php怎么实现在图片上做标记,如何给图片添加标记(notes)?

羊慈
2023-12-01

最近几天没有更新文章,有点小忙!呵呵,不说废话,直接进入正题。

今天主要说的是,如何在图片上添加标记(一个或多个)。从网上搜到很多的例子,总体来说,感觉这个很不错!!

我就简单说一下这个标记是怎么存储的!!首先我们放到php的运行环境下,这个index.html是调用notes这个js的,代码:$('.jquery-note_1-1').jQueryNotes({         operator: 'notes.php', //要提交到的文件        maxNotes: 10, //最多显示标记的个数        allowDelete: false, //是否允许删除标记        allowEdit: false, //是否允许编辑标记        allowLink: false, //标记是否有链接        allowAdd: false, //是否允许添加标记        allowHide: false, //是否隐藏标记    });

当我添加标记成功之后,提交到 notes.php,数值会变成json格式,这时候是调用本身的notes.clss.php里面的某个函数,写入到文件中!(下面有例子可以下载看下)

题外:如果想存入数据库,那咱们把写入文件的那步改写成链接数据库就可以了。如果大家看的不是很清楚,可以给我留言或者去看下 官方网站。

注:我在使用的过程中,添加notes时在谷歌浏览器下可以移动到图片的外面。经过排查问题出现在样式上面(自带样式)。解决办法:打开css/style.css文件,找到.jquery-notes-container{ 这行(行数:33),把.jquery-notes-container .notes {     position:relative; } .jquery-notes-container .notes img {     position:relative; }

这几行都删除,并且在jquery-notes_1.0.8.js里面这一行:$('#jquery-notes_'+pointer+' .notes .select').css({  加上position。 整体代码:$('#jquery-notes_'+pointer+' .notes .select').css({             width: ID.minWidth,             height: ID.minHeight,             left: position.left,             top: position.top,             cursor: 'move',             position: 'absolute'         }).draggable({             containment: 'parent',             cursor: 'move'         }).resizable({             containment: 'parent',             minWidth: ID.minWidth,             minHeight: ID.minHeight,             maxWidth: ID.maxWidth,             maxHeight: ID.maxHeight,             aspectRatio: ID.aspectRatio,             handles: 'ne, se, sw, nw'         });

 类似资料: