====== TIFF 프리뷰 이미지 뷰어 가이드 ======
===== 예시 =====
템플릿 위치: /HTML5/OSS/tiff_preview
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/OSS/tiff_preview.xml|tiff_preview.xml]]
* [[xf5projecthome>template/screen/HTML5/OSS/tiff_preview.js|tiff_preview.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/OSS/tiff_preview|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
/**
* 이미지 파일 오브젝트, 추후 로컬 저장시나 처리할때 사용한다.
* 2022.07.06 이미지 페이지 단위로 인쇄하게 처리
*/
this.objTiffFile = null;
// 화면 로드 이벤트
function screen_on_load()
{
// tiff.min.js 라이브러리 로드
this.loadTiffLib();
// TIFF 이미지 URL 설정
this.fld_text_multi.settext("./ext/media/multipage.tif");
}
/**
* tiff.min.js 라이브러리 로드
*/
function loadTiffLib()
{
// TIFF 이미지 처리용 라이브러리 로드 (프로젝트 환경에 따라 경로를 달라질 수 있음)
// 템플릿이 저장된 디렉토리의 tiff.min.js 파일을 활용하세요.
// https://github.com/seikichi/tiff.js/blob/master/README.md
screen.loadjs("./ext/lib/tiff.min.js");
// 초기 설정
// When you load large tiff file, you will see the error message "Cannot enlarge memory arrays in asm.js"
// in such case, please call 'Tiff.initialize({TOTAL_MEMORY: ... })' before you create a Tiff instance
Tiff.initialize({ TOTAL_MEMORY: 16777216 * 10 });
}
/**
* URL을 File 객체로 변경해서 리턴한다. (promise 객체)
* @param {string} AUrl 이미지를 가져올 URL
* @returns {promise} 이미지를 File Object로 생성해서 리턴한다.
*/
function getFileFromURL(image_url) {
var sFileName, xhr;
// 이미지를 가져오기 위한 XMLHttpRequest 오브젝트 생성
xhr = new XMLHttpRequest();
// 이미지 URL에서 파일 이름 추출
sFileName = image_url.split("/").pop();
return new Promise(function (resolv, reject) {
// ASYNC 방식으로 XMLHttpRequest open 함수 호출
xhr.open("GET", image_url, true);
// 수신 데이터 형식을 BLOB 형식으로 지정
xhr.responseType = "blob";
// 정상 수신 이벤트 처리 함수
xhr.onload = function (event) {
// 파일을 정상적으로 가져왔다.
resolv(new File([event.target.response], sFileName));
};
// 오류 수신 이벤트 처리 함수
xhr.onerror = function (event) {
// 파일을 제대로 못가져왔다.
reject();
};
// XMLHttpRequest send 함수 호출
xhr.send();
});
}
/**
* Tiff File오브젝트를 이용해서 이미지를 그리기 처리한다.
* @param {File} ATiffFileObj 처리할 Tiff파일오브젝트
*/
function getDataURITiffFromFile(ATiffFileObj)
{
var _this;
_this = this;
// 화면 Protect 처리
screen.setscreenprotect(true, 30);
// Tiff 이미지 데이터 정보 보관용 데이터셋 초기화
this.xdImage.init();
return new Promise(function (resolv, reject) {
var reader = new FileReader();
reader.onload = function (e) {
var buffer = e.target.result;
var tiffImage = new Tiff({ buffer: buffer });
var intImageCount = tiffImage.countDirectory();
// 이미지 갯수만큼 Loop를 돌면서 데이터 셋(xdImage)에 값 설정
for (i = 0; i < intImageCount; i++) {
tiffImage.setDirectory(i);
_this.xdImage.addrow(false);
_this.xdImage.setdata(i, 0, tiffImage.toDataURL(), false);
_this.xdImage.setdata(i, 1, (i + 1).toString(10), false);
_this.xdImage.setdata(i, 2, tiffImage.width(), false);
_this.xdImage.setdata(i, 3, tiffImage.height(), false);
}
// 데이터세 이벤트 발생하여 컴포넌트에 반영
_this.xdImage.fireevent();
// Tiff 이미지 오브젝트 닫기
tiffImage.close();
//
_this.lvImageLists.setselecteditem(0, true);
_this.lvImageLists.setfocus();
resolv();
}.bind(_this);
reader.readAsArrayBuffer(ATiffFileObj);
});
}
// "웹이미지로드" 버튼 이벤트, 웹에서 다운로드해서 이미지 표시
function btn_load_imagemulti_on_mouseup(objInst)
{
var _this;
_this = this;
// URL을 File 객체로 변경해서 리턴한다. (promise 객체)
getFileFromURL(this.fld_text_multi.gettext()).then(function (AObjTiffFile) {
_this.objTiffFile = AObjTiffFile;
_this.getDataURITiffFromFile(AObjTiffFile).then(function () {
screen.setscreenprotect(false);
_this.FitLeftImageSize();
console.log("로드 완료");
});
}.bind(this)).catch(function () {
screen.alert("파일 다운로드 실패");
});
}
// "로컬파일일기" 버튼 이벤트, 사용자 PC에서 파일을 선택하여 이미지 표시
function btnSelectTiffFIle_on_mousedown(objInst) {
// File 오브젝트를 이용하여 파일 선택 상자 표시
// 파일 선택시 파일 컴포넌트의 on_selectfiles 이벤트에 지정된 아래의 "objFile_on_selectfiles" 함수 호출됨
this.objFile.selectfiles("image/tiff", false);
}
// 좌측 리스트뷰 아이템내 이미지 썸네일을 보여주기 위한
// 작은 이미지에 대한 fit 처리한다. (아래 로직은 IE에서 작동하지 않는다.)
function FitLeftImageSize() {
// 좌측 리스트뷰 아이템내 이미지 썸네일을 보여주기 위한
// 작은 이미지에 대한 fit 처리한다. (아래 로직은 IE에서 작동하지 않는다.)
for (var i = 0; i < this.imgSmall.length; i++) {
// fit 처리
// The CSS object-fit property is used to specify
// how an ![]()
or