−목차

TIFF 이미지 뷰어 가이드

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

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

예시

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

템플릿 파일

화면 스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
// 화면 로드 이벤트
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();
}