JavaScript 이미지 주석을 위한 Annotorious 라이브러리

Annotorious란 무엇인가요?

Annotorious는 JavaScript로 작성된 오픈소스 이미지 주석 라이브러리로, 이미지의 원하는 위치에 모양을 그려 브라우저 내에서 이미지에 주석을 추가할 수 있습니다. 주석을 위해 모양을 그릴 때마다 팝업이 열려 주석을 추가하고 태그를 추가하여 주석에 레이블을 지정할 수도 있습니다. 라이브러리는 기존 주석에 답글을 추가하고 필요한 경우 삭제하는 기능도 지원합니다.

Annotorious 라이브러리가 지원하는 일부 기능은 다음과 같습니다.

• 도형 그리기: Annotorious를 사용하면 사용자가 사각형, 원, 타원, 자유형 주석과 같은 도형을 이미지에 그릴 수 있습니다.
• 댓글 및 메모: 사용자는 Annotorious를 사용하여 이미지의 특정 부분에 사용자 지정 댓글과 메모를 추가할 수 있습니다.
• 라벨 지정 또는 태그 지정: Annotorious는 이미지 내의 다양한 영역이나 객체에 주석을 달기 위해 라벨이나 태그를 추가하는 기능을 지원합니다.
• 통합: Annotorious는 웹 페이지와 웹사이트에 쉽게 통합되어 원활한 주석 기능을 제공합니다.
• 사용자 정의: 라이브러리는 사용자의 필요에 맞게 주석의 모양과 동작을 사용자 정의하는 옵션을 제공합니다.
• 호환성: Annotorious는 다양한 웹 브라우저 및 플랫폼에서 원활히 작동하여 다양한 환경에 다양하게 활용할 수 있습니다.

GitHub 통계

이름:
언어:
별:
포크:
특허:
저장소가 마지막으로 업데이트된 시간:

Annotorious 시작하기

Annotorious를 얻고 웹 프로젝트에서 사용하는 방법에는 세 가지가 있습니다.

1. NPM을 사용하여 설치

Node.js를 설치한 후 아래 명령을 실행하세요.

npm install @recogito/annotorious

2. CDN을 통한 호스팅 라이브러리 사용

Annotorious는 무료 CDN 서버에도 호스팅되며 아래와 같은 URL을 사용할 수 있습니다.

• JS: https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.js
• CSS: https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.css

3. 사전 빌드된 릴리스 사용

GitHub에서 미리 빌드된 최신 Annotorious 릴리스를 다운로드하세요. 압축된 릴리스를 추출하면 아래 파일이 표시됩니다(annotorious.min.css 및 annotorious.min.js는 웹사이트에서 이미지 주석에 사용됩니다).

• Annotorious.min.css
• Annotorious.min.js
• annotorious.umd.js.map
• recogito-polyfills.js

이미지에 주석 추가

사전 빌드된 릴리스를 다운로드하면 annotorious.min.css 및 annotorious.min.js 파일을 얻을 수 있으며, 이 파일은 head 태그에서 웹사이트와 연결하여 Annotorious JavaScript 라이브러리를 통합할 수 있습니다. 이미지 주석 라이브러리가 통합된 후, 주석을 추가해야 하는 이미지를 추가할 수 있으며, 마지막으로 이미지에 주석을 추가하기 위해 Annotorious 라이브러리를 초기화하는 JavaScript 코드를 작성할 수 있습니다.

위의 코드는 단순히 주석을 달 준비가 된 브라우저의 이미지를 보여줍니다. 이미지와 라이브러리가 브라우저에 로드되면 원하는 이미지 위치를 두 번 탭하고, 누르고, 드래그하여 필요한 영역을 강조하기 위해 모양을 그릴 수 있습니다. 모양이 그려지면 팝업이 열리고 주석을 추가하고 심지어 관련 주석에 레이블/태그를 지정할 수도 있습니다. 예를 들어, 아래 스크린샷을 확인하세요.

이미지에 JSON 저장된 주석 추가

이전 예에서 우리는 Annotorious 라이브러리를 웹 페이지와 통합하고 이미지에 수동으로 주석을 그리는 방법을 보여주었습니다. 그러나 JSON 파일에 사전 정의된 주석을 위치와 함께 저장하고, loadAnnotations 메서드를 사용하여 JSON 파일에서 주석 데이터를 로드한 다음 해당 주석을 이미지에 자동으로 추가하는 것도 가능합니다.

참고: Annotorious는 W3C 웹 주석 데이터 모델 및 W3C 미디어 조각 사양을 준수하여 미디어 리소스의 특정 부분이나 조각에 주석을 추가합니다. 따라서 호환되는 JSON 파일 구조를 사용해야 합니다.

아래는 이미지에 자동으로 주석을 추가하는 데 사용되는 샘플 annotations.json 파일입니다.

위의 코드는 주석 데이터를 주석.json 파일에서 로드하여 이미지에 자동으로 추가합니다. 예를 들어, 아래 스크린샷을 확인하세요.

온라인 데모

이미지 주석 데모 및 JSON 기반 이미지 주석 데모를 확인하여 Annotorious JavaScript 라이브러리를 더 잘 이해할 수 있습니다.

결론

Annotorious는 오픈 소스이며 훌륭한 주석 JavaScript 라이브러리입니다. 하지만 이미지에 주석을 추가하는 것만 지원합니다. 게다가 주석에 사용할 수 있는 모양도 제한적입니다.

유사한 제품