====== TIFF 이미지 뷰어 가이드 ======
이 화면은 https://github.com/seikichi/tiff.js 사이트에서 제공하는 라이브러리를 이용한 TIFF 이미지 뷰어 샘플 화면이다.
템플릿이 저장된 디렉토리의 tiff.min.js 파일을 활용하세요.
===== 예시 =====
템플릿 위치: /HTML5/OSS/tiff_viewer
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/OSS/tiff_viewer.xml|tiff_viewer.xml]]
* [[xf5projecthome>template/screen/HTML5/OSS/tiff_viewer.js|tiff_viewer.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/OSS/tiff_viewer|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// 화면 로드 이벤트
function screen_on_load()
{
// TIFF 이미지 처리용 라이브러리 로드 (프로젝트 환경에 따라 경로를 달라질 수 있음)
// 템플릿이 저장된 디렉토리의 tiff.min.js 파일을 활용하세요.
screen.loadjs("./ext/lib/tiff.min.js");
// TIFF 이미지 URL 설정
this.fld_text.settext("./ext/media/onepage.tif");
// TIFF 이미지 URL 설정
this.fld_text_multi.settext("./ext/media/multipage.tif");
}
function btn_load_image_on_mouseup(objInst)
{
var xhr, _this, tiff, canvas;
xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open("GET", this.fld_text.gettext());
Tiff.initialize({ TOTAL_MEMORY: 16777216 * 10 });
_this = this;
xhr.onload = function(event) {
tiff = new Tiff({buffer: xhr.response});
canvas = tiff.toCanvas();
_this.fld_width.settext(tiff.width());
_this.fld_height.settext(tiff.height());
canvas.style.display = "block";
// 크기 맞춤 처리시 아래 내용 주석 해제
// _this.div_tiffviewer.setsize(tiff.width() + 2, tiff.height() + 2); // +2 border size
_this.div_tiffviewer.getdom().append(canvas);
// 캔버스 TIFF 이미지 내용을 image 컴포넌트에 표시
_this.img.setimagedata(canvas.toDataURL());
};
xhr.send();
}
function btn_load_imagemulti_on_mouseup(objInst)
{
var xhr, _this, i, tiff, image_count, canvas, obj_prop, new_div;
this.tab.deletealltab();
xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open("GET", this.fld_text_multi.gettext());
Tiff.initialize({ TOTAL_MEMORY: 16777216 * 10 });
_this = this;
xhr.onload = function(event) {
tiff = new Tiff({buffer: xhr.response});
image_count = tiff.countDirectory();
for (i = 0; i < image_count; i++) {
_this.tab.addtab("image_" + i, 1, 100, "", true, null, false, false, false);
obj_prop = {
x: 0,
y: 0,
width: 100,
height: 100
};
new_div = _this.tab.createobjectex(i, XFD_CTRLKIND_DIV, obj_prop);
tiff.setDirectory(i);
canvas = tiff.toCanvas();
canvas.style.display = "block";
new_div.setsize(tiff.width() + 2, tiff.height() + 2); // +2 border size
new_div.getdom().append(canvas);
}
_this.tab.settabitemfocus(0);
};
xhr.send();
}