当前位置:主页 > JavsScript库 > 图库 / 图片 >

Annotorious:图像注释库,在javascript中注释图像 - annotoriou
栏目分类:图库 / 图片   发布日期:2021-08-16   浏览次数:

Annotorious 是一个简单但功能丰富的 JavaScript 图像注释库,可为图像的特定部分添加自定义注释、注释、标签。

特征:

  • 从JSON文件加载预先定义的注释。

  • 拖放从一个编辑器弹出创建新的注解。

  • 基于W3C WebAnnotation模型。

  • 触摸和移动友好。

如何使用它:

1. 安装并导入 Annotorious 作为模块。

# NPM
$ npm install @recogito/annotorious --save
import { Annotorious } from '@recogito/annotorious';

2.或者下载安装包并插入annotorious.min.js到HTML文档。

<link rel="annotorious.min.css" href="styles.css" />
<script src="annotorious.min.js"></script>

3. 初始化图像上的 Annotorious,我们就可以开始了。

<img id="example" src="example.jpg" />
var anno = Annotorious.init({
    image: 'example'
});

4. 在 w3c.json 文件中定义您的注释并在页面加载时加载它。

// annotations.w3c.json
[
  { 
    "@context": "http://www.w3.org/ns/anno.jsonld",
    "id": "#unique-ID-Here",
    "type": "Annotation",
    "body": [{
      "type": "TextualBody",
      "value": "注释内容"
    }, {
      "type": "TextualBody",
      "purpose": "tagging",
      "value": "标签 1"
    }, {
      "type": "TextualBody",
      "purpose": "tagging",
      "value": "标签 2"
    }],
    "target": {
      "selector": [{
        "type": "FragmentSelector",
        "conformsTo": "http://www.w3.org/TR/media-frags/",
        "value": "xywh=pixel:270,120,90,170"
      }]
    }
  }
]
anno.loadAnnotations('annotations.w3c.json');

5. 启用只读模式。默认为假。

var anno = Annotorious.init({
    image: 'example',
    readOnly: true
});

6. 禁用编辑器弹出窗口。默认为假。

var anno = Annotorious.init({
    image: 'example',
    disableEditor: true
});

7. 按照您在annotations.w3c.json.

// 添加注解
anno.addAnnotation(annotation [, readOnly]);
  
// 添加注释数组
anno.setAnnotations(annotations);

8. 从图像中删除注释。

anno.removeAnnotation(ID);

9. 获取所有注释。

anno.getAnnotations();

10. 选择注释。

// 选择当前注解
anno.selectAnnotation();
  
// 选择特定的注解
anno.selectAnnotation(ID);

11. 显示/隐藏注释。

anno.setAnnotationsVisible(TRUE/FALSE);

12. 将自定义模板应用于注释。

anno.applyTemplate(template, openEditor[TRUE/FALSE]);

13. 设置和获取作者信息。

// 设置
anno.setAuthInfo({
  id: 'https://www.html369.cn',
  displayName: 'html369'
});
// 清除
anno.clearAuthInfo();

14. 在绘图工具之间切换:“rect”或“polygon”。

anno.setDrawingTool(toolName);

15. 显示或隐藏注释层。

anno.setAnnotationsVisible(boolean);

16. 设置服务器时间时间戳。

anno.setServerTime(timestamp);

17. 销毁实例。

anno.destroy();

18. 事件处理程序。

anno.on('changeSelectionTarget', function(target) {
  // 当一个新创建的选择的形状
});
  
anno.on('createSelection', function(selection) {
  // 当在图像上绘制新的选择形状时
});
  
anno.on('cancelSelection', function(selection) {
  // 做某事
});
  
anno.on('selectAnnotation', function(annotation) {
  console.log('selected', annotation);
});
  
anno.on('createAnnotation', function(a) {
  console.log('created', a);
});
  
anno.on('updateAnnotation', function(annotation, previous) {
  console.log('updated', previous, 'with', annotation);
});
  
anno.on('deleteAnnotation', function(annotation) {
  console.log('deleted', annotation);
});
  
anno.on('mouseEnterAnnotation', function(annotation, event) {
  console.log('mouseEnter', annotation);
});
  
anno.on('mouseLeaveAnnotation', function(annotation, event) {
  console.log('mouseLeave', annotation);
});

19.使用自定义格式化程序功能:

// 字符串示例
var formatter = function(annotation) {
    var longComments = annotation.bodies.filter(function(body) {
      var isComment = body.type === 'TextualBody' && 
        (body.purpose === 'commenting' || body.purpose === 'replying');
      var isLong = body.value.length > 100;
      return isComment && isLong;
    });
    if (longComments.length > 0) {
      // 这个注解包含长注释 - 添加 CSS 类
      return 'long';
    }
}
var anno = Annotorious.init({
    formatter: formatter
});
// 对像示例
var formatter = function(annotation) {
    var contributors = [];
    annotation.bodies.forEach(function(body) {
      if (body.creator)
        contributors.push(body.creator.id);
    });
    if (contributors.length > 1) {
      return {
        'data-users': contributors.join(', '),
        'style': 'stroke-width:2; stroke: red'
      }
    }
}
var anno = Annotorious.init({
    formatter: formatter
});


官方网站:https://github.com/recogito/annotorious

相关热词: Annotorious注释图像

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库