TIFF 이미지 뷰어 가이드

이 화면은 https://github.com/seikichi/tiff.js 사이트에서 제공하는 라이브러리를 이용한 TIFF 이미지 뷰어 샘플 화면이다.

템플릿이 저장된 디렉토리의 tiff.min.js 파일을 활용하세요.

템플릿 위치: /HTML5/OSS/tiff_viewer

템플릿 파일

• tiff_viewer.xml
• tiff_viewer.js
• 새창으로 실행

// 화면 로드 이벤트
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();
}