[javascript] Universal Viewer를 활용한 문서 자동 인식 및 태그 기능

본 블로그는 Universal Viewer를 사용하여 문서를 자동으로 인식하고 태그를 추가하는 방법을 안내합니다.

소개

Universal Viewer는 JavaScript를 기반으로한 오픈 소스 웹 어플리케이션입니다. 이를 통해 다양한 형식의 문서, 이미지, 동영상 등을 웹 브라우저에서 간편하게 볼 수 있습니다. 이 블로그에서는 Universal Viewer를 사용하여 문서를 자동으로 인식하고 해당 문서에 태그를 추가하는 기능에 대해 알아보겠습니다.

문서 인식

Universal Viewer는 문서 파일이 업로드되면, 자동으로 문서 타입을 인식합니다. 이를 통해 문서가 PDF인지, 이미지인지, 음악 파일인지 등을 구분할 수 있습니다. 일반적으로 HTML5를 지원하는 모든 브라우저에서 문서 타입을 인식할 수 있습니다.

var UV = createUVInstance();
UV.on('ready', function () {
  var documentType = UV.getDocType();
  console.log('Document Type:', documentType);
});

위 예제에서는 Universal Viewer 인스턴스를 생성하고 ready 이벤트가 발생하면 문서 타입을 확인하는 코드입니다. UV.getDocType() 메서드를 통해 문서 타입을 얻을 수 있습니다.

태그 추가

Universal Viewer는 문서에 태그를 추가하는 기능을 제공합니다. 이를 통해 특정 부분을 마킹하거나 주석을 추가할 수 있습니다. 사용자는 선택한 영역을 드래그하여 태그를 생성하고, 원하는 형식의 태그를 추가할 수 있습니다.

var UV = createUVInstance();
UV.on('ready', function () {
  var overlay = UV.createOverlay();
  overlay.addItem({
    type: 'Highlight',
    start: { canvasIndex: 0, x: 10, y: 20 },
    end: { canvasIndex: 0, x: 100, y: 50 }
  });
  overlay.addItem({
    type: 'Annotation',
    content: 'Please review this part.',
    position: { canvasIndex: 0, x: 200, y: 200 }
  });
});

위 예제에서는 Universal Viewer 인스턴스를 생성하고 ready 이벤트가 발생하면 태그를 추가하는 코드입니다. UV.createOverlay() 메서드를 사용하여 오버레이를 생성하고, overlay.addItem() 메서드를 통해 태그를 추가합니다. 여기서 추가할 수 있는 태그 형식은 Highlight, Annotation 등이 있습니다.

결론

Universal Viewer를 사용하면 웹 어플리케이션에서 문서를 간편하게 인식하고 태그를 추가할 수 있습니다. 이를 통해 문서 관리나 공유할 때 편리하게 활용할 수 있습니다. 더 자세한 내용은 Universal Viewer 공식 문서를 참고하시기 바랍니다.