JavaScript 이미지 주석을 위한 Annotorious 라이브러리
JavaScript의 Annotorious 라이브러리를 사용하여 웹 페이지의 이미지에 그림, 설명 및 라벨을 추가합니다.
Annotorious란 무엇인가요?
Annotorious는 JavaScript로 작성된 오픈 소스 이미지 주석 라이브러리로, 이미지의 원하는 위치에 모양을 그려 브라우저 내의 이미지에 주석을 추가할 수 있습니다. 주석을 위해 모양을 그릴 때마다 팝업이 열리고 주석을 추가할 수 있으며 태그를 추가하여 주석에 라벨을 붙일 수도 있습니다. 또한 라이브러리는 기존 주석에 응답을 추가하고 필요한 경우 삭제할 수도 있습니다.
Annotorious 라이브러리에서 지원되는 일부 기능은 다음과 같습니다.
- 도형 그리기: Annotorious를 사용하면 사용자는 직사각형, 원, 타원, 자유형 주석과 같은 도형을 이미지에 그릴 수 있습니다.
- 댓글 및 메모: 사용자는 Annotorious를 사용하여 이미지의 특정 부분에 맞춤 댓글과 메모를 추가할 수 있습니다.
- 라벨 지정 또는 태그 지정: Annotorious는 이미지 내의 다양한 영역이나 개체에 주석을 달기 위해 라벨이나 태그를 추가하는 기능을 지원합니다.
- 통합: Annotorious는 웹페이지 및 웹사이트에 쉽게 통합될 수 있어 원활한 주석 기능이 가능합니다.
- 맞춤설정: 라이브러리는 필요에 맞게 특수효과의 모양과 동작을 맞춤설정하기 위한 옵션을 제공합니다.
- 호환성: Annotorious는 다양한 웹 브라우저 및 플랫폼과 잘 작동하므로 다양한 환경에서 다용도로 사용할 수 있습니다.
Annotorious 시작하기
Annotorious를 다운로드하여 웹 프로젝트에서 사용하는 방법에는 세 가지가 있습니다.
1. NPM을 사용하여 설치
Node.js를 설치한 후 아래 명령을 실행하세요.
NPM을 사용하여 Annotorious 설치
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를 통합하기 위해 head 태그로 웹사이트에 연결할 수 있는 annotorious.min.css 및 annotorious.min.js 파일을 얻게 됩니다. 자바스크립트 라이브러리. 이미지 주석 라이브러리가 통합된 후 주석이 추가되어야 하는 이미지를 추가할 수 있으며 마지막으로 이미지에 주석을 추가하기 위한 Annotorious 라이브러리를 초기화하는 JavaScript 코드를 작성할 수 있습니다.
위의 코드는 주석을 추가할 준비가 된 브라우저의 이미지를 보여줍니다. 이미지와 라이브러리가 브라우저에 로드되면 이미지의 원하는 위치를 두 번 탭하고 길게 누른 후 드래그하여 필요한 영역을 강조 표시하는 모양을 그릴 수 있습니다. 모양이 그려지면 설명을 추가할 수 있는 팝업이 열리고 관련 설명에 라벨/태그도 추가할 수 있습니다. 예를 들어 아래 스크린샷을 확인하세요.
이미지에 JSON 저장 주석 추가
이전 예에서는 Annotorious 라이브러리를 웹 페이지와 통합하고 이미지에 수동으로 주석을 그리는 방법을 보여주었습니다. 그러나 사전 정의된 주석을 해당 위치를 포함하여 JSON 파일에 저장하고 loadAnnotations 메서드를 사용하여 JSON 파일에서 주석 데이터를 로드한 다음 자동으로 해당 주석을 이미지에 추가할 수도 있습니다.
참고: Annotorious는 W3C 웹 주석 데이터 모델 및 W3C 미디어 조각 사양은 미디어 리소스의 특정 부분이나 조각에 주석을 추가합니다. 따라서 호환 가능한 JSON 파일 구조를 사용해야 합니다.
다음은 이미지에 주석을 자동으로 추가하는 데 사용되는 샘플 annotations.json 파일입니다.
위 코드는 Annotation.json 파일에서 주석 데이터를 로드하여 이미지에 자동으로 추가합니다. 예를 들어 아래 스크린샷을 확인하세요.
온라인 데모
대상을 확인하여 온라인에서 위의 두 가지 예를 시도해 볼 수도 이미지 주석 데모 및 JSON 기반 이미지 주석 데모를 사용한 주석 데모입니다.
결론
Annotorious는 오픈 소스이자 훌륭한 주석 JavaScript 라이브러리입니다. 그러나 이미지에 주석 추가만 지원합니다. 게다가 주석에 사용할 수 있는 모양의 수도 제한되어 있습니다.
