核心内容摘要
jalapskxixi2025kinouyigirlanig：开启属于你的未来主义时尚密码
本文简介最近有工友问我前端怎么给图片做标注。
使用Fabric.js或者Konva.js等库确实可以实现但我又好奇有没有专门做图片标注的工具呢在网上搜了一下发现Annotorious可以实现这个功能。
Annotorious提供了图片注释和标注功能而且用法很简单。
本文分为 【快速入门】和【API讲解】两部分。
【快速入门】部分包含Annotorious的安装、使用、导入导出的讲解。
这几点应该是项目中比较核心的流程给希望快速入门的工友提供一丢丢帮助。
【API讲解】这部分主要讲一下我认为比较常用的功能。
注意是“我认为”。
快速入门快速入门部分会讲解Annotorious的安装、使用、导入和导出数据功能。
安装 AnnotoriousCDN!-- 引入样式 --linkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/recogito/annotorious
2.
10/dist/annotorious.min.css!-- 引入js --scriptsrchttps://cdn.jsdelivr.net/npm/recogito/annotorious
2.
10/dist/annotorious.min.js/script你可以把这两份文件下载到自己的项目里再引入。
NPM用以下命令安装Annotoriousnpm install recogito/annotorious然后在项目中引入import{Annotorious}fromrecogito/annotoriousimportrecogito/annotorious/dist/annotorious.min.css使用 annotorious把Annotorious安装到项目后就可以使用了。
Annotorious的用法很简单只需做以下2步在html部分插入图片初始化Annotorious并绑定图片元素元素的ID或者元素本身CDN和NPM在初始化时的用法稍微有点不同。
CDNimgsrc./img.jpgidmy-image/scriptletannoAnnotorious.init({image:my-image// 元素ID})/script使用CDN的方式引入Annotorious在初始化时要Annotorious.init这样写。
NPMimgsrc./img.jpgidmy-image/scriptconstannonewAnnotorious({image:document.getElementById(my-image)// 元素本身})/script使用NPM的方式引入Annotorious在初始化时需要new Annotorious这样写。
注意在Annotorious初始化代码最好放在你所使用的框架的页面加载完成后的生命周期函数里导出数据 getAnnotations()如果你需要将图片上的标注保存到服务器就需要把数据导出。
所用到的方法是getAnnotations()。
buttononclicksave()保存/buttonimgsrc./
jpgidimg/scriptletannonullonloadfunction(){annoAnnotorious.init({image:img})}functionsave(){letresanno.getAnnotations()console.log(res)}/script导入数据 loadAnnotations(url)Annotorious可以通过loadAnnotations()方法加载数据。
loadAnnotations(url)支持传入一个URL参数这个URL所指的是数据文件地址。
比如我在本地创建一个data.json文件文件内容是使用前面讲到的getAnnotations()方法导出的数据我的数据内容如下[{context:http://www.w
org/ns/anno.jsonld,type:Annotation,body:[{type:TextualBody,value:1,purpose:commenting}],target:{source:http://
127.
0.
1:5500/
jpg,selector:{type:FragmentSelector,conformsTo:http://www.w
org/TR/media-frags/,value:xywhpixel:100,100,500,300}},id:#cabe2e71-b19f-
c
fd50ba}]在本地测试时我使用了本地服务器把data.json管理起来在浏览器可以通过http://
127.
0.
1:5500/data.json访问到该文件。
然后再使用loadAnnotations(url)方法把数据渲染出来即可。
buttononclickload()加载/buttonimgsrc./
jpgidimg/scriptletannonullonloadfunction(){annoAnnotorious.init({image:img})}functionload(){anno.loadAnnotations(http://
127.
0.
1:5500/data.json)}/script点击加载按钮后图片上就会出现一个选框点击选框可以看到数据已经成功加载出来。
添加数据 addAnnotation()但在实际项目中后台不一定会给前端返回一个文件地址后台可能会直接返回一个json数据。
这时候如果使用loadAnnotations()方法加载json数据是行不通的要通过遍历读取数据中心的data里的数据然后调用addAnnotation()方法将元素添加到页面。
我使用json-server简单的在本地搭建一个服务器给前端访问对应的资源前端用axios请求资源。
buttononclickload()加载/buttonimgsrc./
jpgidimg/scriptletannonullonloadfunction(){annoAnnotorious.init({image:img})}functionload(){axios.get(http://localhost:3000/anno).then(res{res.data.data.forEach(item{anno.addAnnotation(item)})})}/script很久之前写过一篇 《『前端必备』本地数据接口 —— json-server 从入门到膨胀》 文章介绍json-server的基础用法有兴趣的工友可以去瞧瞧。
API讲解这部分主要讲一些我关注到的功能如果想全面了解Annotorious可以查看文档。
汉化 localeAnnotorious是根据浏览器的设置来确定使用哪种语言。
如果需要修改Annotorious使用的语言可以在初始化时配置一下locale字段。
比如配置简体中文可以用zh-CN配置繁体中文可以用zh-TW。
imgsrc./img.jpgidmy-image/scriptletannoAnnotorious.init({image:my-image,locale:zh-CN// 修改语言})/script自定义提示文本 messages如果想自定义按钮或者输入框的提示文本可以配置messages。
imgsrc./img.jpgidmy-image/script// 创建一个包含自定义消息的对象varcustomMessages{Add a comment...:评论评论,Add a reply...:回复两句,Add tag...:这是标签啊,Cancel:取消,Close:关闭,Edit:编辑~,Delete:删除❌,Ok:确定}letannoAnnotorious.init({image:my-image,messages:customMessages// 自定义消息内容})/script如果同时配置了locale和messages会优先使用message的值。
空注释 allowEmpty默认情况下如果框选后没输入标签或者评论就按确定是不会保存选框的。
如果想保存空选框可以将allowEmpty设置为true。
imgsrc./img.jpgidmy-image/scriptletannoAnnotorious.init({image:my-image,allowEmpty:true// 允许空注释})/script框选辅助线 crosshair有些鼠标指针可能并不是那么标准会影响你框选的准确性。
如果需要非常准确去框选可以开启辅助线功能只需将crosshair设置为true即可。
imgsrc./img.jpgidmy-image/scriptletannoAnnotorious.init({image:my-image,crosshair:true// 开启辅助线})/script只读 readOnly如果不打算提供框选、添加和删除信息的操作给用户可以将readOnly设置为true。
imgsrc./img.jpgidmy-image/scriptletannoAnnotorious.init({image:my-image,readOnly:true// 只读模式})/script禁止编辑 disableEditor如果只需要画框框不需要写注释可以将disableEditor和allowEmpty同时设置为true。
imgsrc./img.jpgidmy-image/scriptletannoAnnotorious.init({image:my-image,allowEmpty:true,// 允许空注释disableEditor:true// 禁用编辑})/script为什么要同时将allowEmpty设为true因为如果你不允许注释为空的话当你点击空白处时选框就会消失。
禁止选中选框 disableSelect将disableSelect设置为true后画布上的选框就无法再次选中了。
imgsrc./img.jpgidmy-image/scriptletannoAnnotorious.init({image:my-image,disableSelect:true// 禁止选中选框})/script虽然还没想到有什么引用场景但还是打算记录一下。
手柄半径 handleRadius箭头所指的就是手柄。
手柄的默认半径是6。
如果需要修改手柄半径可以设置handleRadius属性。
imgsrc./img.jpgidmy-image/scriptletannoAnnotorious.init({image:my-image,handleRadius:20// 设置手柄半径})/script自定义选框样式Annotorious的选框和编辑器都是可以使用css设置样式的。
选框部分使用了SVG编辑器部分直接用了HTML元素。
对SVG不了解的工友可以阅读 《SVG专栏》。
回到Annotorious官方也有给出一个自定义样式的案例 《Customizing Visual Appearance》。
style/* 选框 *//* 隐藏外部形状-对于这种风格我们只需要一个 */svg.a9s-annotationlayer .a9s-selection .a9s-outer, svg.a9s-annotationlayer .a9s-annotation .a9s-outer{display:none;}svg.a9s-annotationlayer .a9s-handle .a9s-handle-outer{display:none;}/* 虚线边框 */svg.a9s-annotationlayer .a9s-selection .a9s-inner, svg.a9s-annotationlayer .a9s-annotation .a9s-inner{stroke-width:4;stroke:white;stroke-dasharray:5;}/* 选中时的填充色 */svg.a9s-annotationlayer .a9s-annotation.editable:hover .a9s-inner{fill:transparent;}/* 手柄颜色 */svg.a9s-annotationlayer .a9s-handle .a9s-handle-inner{fill:white;stroke:white;}/* 选中选框时遮罩层颜色 */svg.a9s-annotationlayer .a9s-selection-mask{fill:rgba(0,0,0,
0.
;}/* 编辑器 *//* 容器 */.r6o-editor .r6o-editor-inner{box-sizing:border-box;padding:10px;border-radius:6px;background:#F4F2DE;}/* 箭头 */.r6o-editor .r6o-arrow:after{background-color:#F4F2DE;}/* 编辑器 */.r6o-widget.comment.editable, .r6o-widget.r6o-tag{background-color:#EEE3CB;}.r6o-widget.comment{background-color:#D7C0AE;}.r6o-editor .r6o-editor-inner .r6o-widget{border-bottom-color:#7C9D96;}.r6o-editor .r6o-editor-inner .r6o-widget.r6o-tag{border-bottom:none;}/* 按钮 */.r6o-editor .r6o-btn{border-radius:100px;background-color:#7C9D96;border-color:#7C9D96;color:#fff;}/* 线框按钮 */.r6o-editor .r6o-btn.outline{color:#7C9D96;background-color:transparent;}/styleimgsrc./img.jpgidmy-image/scriptletannoAnnotorious.init({image:my-image,locale:zh-CN// 修改语言})/script上面这份代码选框的样式是从Annotorious官网教程搬过来的。
编辑器的样式我随便配了一下工友们也可以打开浏览器控制台看Elements面板的HTML代码根据结构去修改样式即可。
筛选功能输入时需要快速添加预选项时可以这样配置imgsrc./img.jpgidmy-image/scriptletannoAnnotorious.init({image:my-image,widgets:[COMMENT,{widget:TAG,vocabulary:[雷猴,鲨鱼辣椒,蝎子莱莱]}]})/script多边形选框使用setDrawingTool(toolName)方法可以设置不同的绘制工具。
如果需要讲选框设置成多边形可以传入polygon。
imgsrc./img.jpgidmy-image/scriptletannoAnnotorious.init({image:my-image})anno.setDrawingTool(polygon)/script想要知道当前有哪些绘图工具可以使用anno.listDrawingTools()方法查看imgsrc./img.jpgidmy-image/scriptletannoAnnotorious.init({image:my-image})consttoolNamesanno.listDrawingTools()console.log(toolNames)/script其他除了上面介绍到的API外Annotorious还有很多玩法的比如删除指定注释、清空所有注释等。
详情请看 《annotorious API文档》插件Annotorious也有一些好玩的插件有兴趣的可以看看 《Annotorious 插件推荐》。
Annotorious 可快速实现图片标注支持标注数据导入导出与样式自定义落地时需考虑组件复用、快速部署的工程效率问题。
试试RollCode 低代码平台轻松搞定私有化部署、自定义组件、静态页面发布SSG SEO。
点赞 关注 收藏 学会了