메뉴 건너뛰기

프로그램언어

Home 프로그램언어 JAVA javascript
✔ 뷰어로 보기
2015.06.19 12:53

예제 - 이미지를 원본 크기로 볼 수 있도록 새창으로 열기 확장 (리사이징 및 이미지 드래그)

조쉬
조회 수 6798 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄 첨부


 [코드]

Image_newWindowPopupExam3.html 

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="mw_image_window.js"></script>
</head>
<body>

<img id="myImg1" src="bigc.png" onclick="mw_image_window(this)" style="width:300px;height:98px;"> 
<img id="myImg3" src="bigc1.png" onclick="mw_image_window(this)" style="width:300px;height:98px;"> 
<img id="myImg2" src="smallc.jpg" onclick="mw_image_window(this)" style="width:300px;height:98px;"> 

<p>Click the button to return the original size and the "new/styled" size of the image.</p>
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    
    var resultStr = "";

    $("img").each(function(index,item){ 
        
        console.log(item);
        var xw = item.naturalWidth; //이미지의 원래 가로크기
        var xh = item.naturalHeight; //이미지의 원래 세로크기
        
        var yw = item.width; //이미지의 가로크기
        var yh = item.height; //이미지의 세로크기
        

        resultStr += "이미지아이디: "+item.id;
        resultStr += "<br/>";
        resultStr += "이미지의 원래 크기(w*h) : " + xw + "*" + xh ;
        resultStr += "<br/>";
        resultStr += "이미지의 현재(Styled) 크기(w*h) : " + yw + "*" + yh ;
        resultStr += "<br/>";
        resultStr += "<br/>";
        
    });    

    $("#demo").html(resultStr);
}
</script>

</body>
</html>

 mw_image_window.js

Colored By Color Scripter™

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

function mw_image_window(img, w, h)
{
    //이미지 url을 가지고 새로운 이미지 객체를 생성해주는 내부 함수.
    function newImg(url) { 
        var i = new Image;
        i.src = url;
        return i;
    }

    //width 또는 height의 값을 전달 받지 않았을 경우 이미지의 원래크기로 세팅
    if (!w || !h) 
    {        
        if( 'naturalWidth' in (new Image)) { //Image객체에 naturalWidth 의 프로퍼티가 있을경우
            var w = img.naturalWidth; //이미지의 원래 가로크기
            var h = img.naturalHeight; //이미지의 원래 세로크기
        }else {
            //전달 받은 이미지 주소를 가지고 새로운 이미지객체 생성
            //새로 생성된 이미지 객체를 통해서 이미지의 원래크기를 구함.
            var w = newImg(img.src).width; 
            var h = newImg(img.src).height;
        }        
    }
    
    //img.src= img.src.replace("/thumbnail", ""); 

    var winl = (screen.availWidth-w)/2; 
    var wint = (screen.availHeight-h)/3; 

    var winW = w;
    var winH = h;

    //이미지크기가 화면의 크기보다 클경우 처리
    if (winW > screen.availWidth) { 
        winl = 0;
        winW = screen.availWidth - 43
        
    }    
    if (winH > screen.availHeight) {
        wint = 0;
        winH = screen.availHeight - 83
    }

    console.log("=============================");
    console.log("ImgWidth: "+w+"/ImgHeight: "+h);
    console.log("winWidth: "+winW+"/winHeight: "+winH);
    console.log("winleft: "+winl+"/wintop: "+wint);
    console.log("=============================");

    var js_url = "<script language='JavaScript1.2'> \n"; 
        js_url += "<!-- \n"; 
        js_url += "var ie=document.all; \n"; 
        js_url += "var nn6=document.getElementById&&!document.all; \n"; 
        js_url += "var isdrag=false; \n"; 
        js_url += "var x,y; \n"; 
        js_url += "var dobj; \n"; 
        js_url += "function movemouse(e) \n"; 
        js_url += "{ \n"; 
        js_url += "  if (isdrag) \n"; 
        js_url += "  { \n"; 
        js_url += "    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x; \n"; 
        js_url += "    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y; \n"; 
        js_url += "    return false; \n"; 
        js_url += "  } \n"; 
        js_url += "} \n"; 
        js_url += "function selectmouse(e) \n"; 
        js_url += "{ \n"; 
        js_url += "  var fobj      = nn6 ? e.target : event.srcElement; \n"; 
        js_url += "  var topelement = nn6 ? 'HTML' : 'BODY'; \n"; 
        js_url += "  while (fobj.tagName != topelement && fobj.className != 'dragme') \n"; 
        js_url += "  { \n"; 
        js_url += "    fobj = nn6 ? fobj.parentNode : fobj.parentElement; \n"; 
        js_url += "  } \n"; 
        js_url += "  if (fobj.className=='dragme') \n"; 
        js_url += "  { \n"; 
        js_url += "    isdrag = true; \n"; 
        js_url += "    dobj = fobj; \n"; 
        js_url += "    tx = parseInt(dobj.style.left+0); \n"; 
        js_url += "    ty = parseInt(dobj.style.top+0); \n"; 
        js_url += "    x = nn6 ? e.clientX : event.clientX; \n"; 
        js_url += "    y = nn6 ? e.clientY : event.clientY; \n"; 
        js_url += "    document.onmousemove=movemouse; \n"; 
        js_url += "    return false; \n"; 
        js_url += "  } \n"; 
        js_url += "} \n"; 
        js_url += "document.onmousedown=selectmouse; \n"; 
        js_url += "document.onmouseup=new Function('isdrag=false'); \n"; 
        js_url += "function resizeWindow(){ \n";    
        js_url += "     var fullHeight = screen.availHeight; \n";    
        js_url += "     var fullWidth = screen.availWidth;     \n";    
        js_url += "     var imgWidth = "+ (w + 43) + "\n";    
        js_url += "     var imgHeight = " + (h + 83) + "\n";    
        js_url += "     if (imgWidth > fullWidth) { \n";    
        //js_url += "         window.moveTo(0,0); \n";    
        js_url += "          imgWidth = fullWidth; \n";    
        js_url += "     } \n";    
        js_url += "     if (imgHeight > fullHeight) { \n";    
        js_url += "          imgHeight = fullHeight; \n";    
        js_url += "     } \n";    
        
        js_url += "     window.resizeTo(imgWidth, imgHeight); \n";    
        js_url += "} \n";    
        js_url += "window.onload = function(){ \n";    
        js_url += "     resizeWindow(); \n";    
        js_url += "     document.oncontextmenu = function (){return false;}; \n";    
        js_url += "     document.ondragstart = function(){return false;}; \n";    
        js_url += "     document.onselectstart = function(){return false;}; \n";    
        js_url += "} \n";    

        
        
        js_url += "//--> \n"; 
        js_url += "</"+"script> \n"; 

    
    var settings;    //새창의 옵션을 저장할 변수

    //케코 레이아웃 엔진을 사용하는지 여부 
    var is_gecko = navigator.userAgent.toLowerCase().indexOf("gecko") >= -1;
    
    var settings;

    if (is_gecko) {
        settings  ='width='+(winW+10)+','; 
        settings +='height='+(winH+10)+','; 
    } else {
        settings  ='width='+winW+','; 
        settings +='height='+winH+','; 
    }
    settings +='top='+wint+','; 
    settings +='left='+winl+','; 
    settings +='scrollbars=no,'; 
    settings +='resizable=yes,'; 
    settings +='status=no'; 


    win=window.open("","image_window",settings); 
    win.document.open(); 
    win.document.write ("<html><head> \n<meta http-equiv='imagetoolbar' CONTENT='no'> \n"); 
    win.document.write ("<meta http-equiv='content-type' content='text/html; charset=UTF-8'>\n"); 
    var size = "이미지 사이즈 : "+w+" x "+h;
    win.document.write ("<title>"+size+"</title> \n"); 
    if(w >= screen.width || h >= screen.height) { //이미지 크기가 화면보다 더 클경우 리사이즈 및 드래그할수있는 스크립트 추가 
        win.document.write (js_url); 
        var click = "ondblclick='window.close();' style='cursor:move' title=' "
                    +size+" \n\n 이미지 사이즈가 화면보다 큽니다. "
                    +"\n 왼쪽 버튼을 클릭한 후 마우스를 움직여서 보세요. \n\n 더블 클릭하면 닫혀요. '"; 
    } 
    else 
        var click = "onclick='window.close();' style='cursor:pointer' title=' "+size+" \n\n 클릭하면 닫혀요. '"; 
    win.document.write ("<style>.dragme{position:relative;}</style> \n"); 
    win.document.write ("</head> \n\n"); 
    win.document.write ("<body leftmargin=0 topmargin=0 bgcolor=#dddddd style='cursor:arrow;'> \n"); 
    win.document.write ("<table width=100% height=100% cellpadding=0 cellspacing=0>");
    win.document.write ("<tr><td align=center valign=middle>");
    win.document.write ("<img src='"+img.src+"' width='"+w+"' height='"+h+"' border=0 class='dragme' "+click+">");
    win.document.write ("</td></tr></table>");
    win.document.write ("</body></html>"); 
    win.document.close(); 

    if(parseInt(navigator.appVersion) >= 4){win.window.focus();} 

}

 



 

 


 [코드]

화면사이즈보다 작은 이미지일경우 출력되는 문서내용​

 

Colored By Color Scripter™

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head> 
<meta http-equiv='imagetoolbar' CONTENT='no'> 
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<title>이미지 사이즈 : 375 x 500</title> 
<style>.dragme{position:relative;}</style> 
</head> 

<body leftmargin=0 topmargin=0 bgcolor=#dddddd style='cursor:arrow;'> 
    <table width=100% height=100% cellpadding=0 cellspacing=0><tr>
    <td align=center valign=middle>
    <img src='smallc.jpg' width='375' height='500' border=0 class='dragme' 
         onclick='window.close();' style='cursor:pointer' 
         title=' 이미지 사이즈 : 375 x 500 \n클릭하면 닫혀요. '>
    </td></tr>
    </table>
</body>
</html>

 화면사이즈보다 큰 이미지일경우 출력되는 문서내용

Colored By Color Scripter™

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
<html><head> 
<meta http-equiv='imagetoolbar' CONTENT='no'> 
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<title>이미지 사이즈 : 1920 x 1200</title> 
<script language='JavaScript1.2'> 
<!-- 
var ie=document.all; 
var nn6=document.getElementById&&!document.all; 
var isdrag=false; 
var x,y; 
var dobj; 
function movemouse(e) 
{ 
  if (isdrag) 
  { 
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x; 
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y; 
    return false; 
  } 
} 
function selectmouse(e) 
{ 
  var fobj      = nn6 ? e.target : event.srcElement; 
  var topelement = nn6 ? 'HTML' : 'BODY'; 
  while (fobj.tagName != topelement && fobj.className != 'dragme') 
  { 
    fobj = nn6 ? fobj.parentNode : fobj.parentElement; 
  } 
  if (fobj.className=='dragme') 
  { 
    isdrag = true; 
    dobj = fobj; 
    tx = parseInt(dobj.style.left+0); 
    ty = parseInt(dobj.style.top+0); 
    x = nn6 ? e.clientX : event.clientX; 
    y = nn6 ? e.clientY : event.clientY; 
    document.onmousemove=movemouse; 
    return false; 
  } 
} 
document.onmousedown=selectmouse; 
document.onmouseup=new Function('isdrag=false'); 
function resizeWindow(){ 
     var fullHeight = screen.availHeight; 
     var fullWidth = screen.availWidth;     
     var imgWidth = 1963
     var imgHeight = 1283
     if (imgWidth > fullWidth) { 
          imgWidth = fullWidth; 
     } 
     if (imgHeight > fullHeight) { 
          imgHeight = fullHeight; 
     } 
     window.resizeTo(imgWidth, imgHeight); 
} 
window.onload = function(){ 
     resizeWindow(); 
     document.oncontextmenu = function (){return false;}; 
     document.ondragstart = function(){return false;}; 
     document.onselectstart = function(){return false;}; 
} 
//--> 
</script> 
<style>.dragme{position:relative;}</style> 
</head> 

<body leftmargin=0 topmargin=0 bgcolor=#dddddd style='cursor:arrow;'> 
<table width=100% height=100% cellpadding=0 cellspacing=0><tr>
<td align=center valign=middle>
<img src='bigc.png' width='1920' height='1200' border=0 class='dragme' 
     ondblclick='window.close();' style='cursor:move' 
     title=' 이미지 사이즈 : 1920 x 1200 \n 이미지 사이즈가 화면보다 큽니다. 왼쪽 버튼을 클릭한 후 마우스를 움직여서 보세요. \n\n 더블 클릭하면 닫혀요. '>
</td>
</tr>
</table>
</body>
</html>

 

 

 

 


Facebook Twitter Google Pinterest
위로 아래로 댓글로 가기 인쇄 첨부
에디터 선택하기
?
List of Articles
번호 제목 날짜 조회 수
207 금액에 점찍고 한글 표시하기 2019.01.16 1271
206 체크박스 전체 선택 및 해제, 반드시 1개 이상 선택 강제 2019.01.16 1308
205 div태그를 이용한 클릭시 레이어 띄우기 2019.01.16 1328
204 오늘 날짜 구하기 2018.11.07 1416
203 opener 값전달, 함수실행.(자식창에서 부모창으로 값전달, 함수실행) 2021.03.26 1438
202 == / === / != / !== 차이 2018.11.07 1443
201 span - 동적으로 글자 바꾸기, 보이기 안보이기 2019.01.16 1448
200 엔터키 / enter key submit form 2018.09.28 1528
199 날짜 계산 (Date) 마지막 날짜(말일)/윤달/윤년 처리하기 2021.08.20 1544
198 특정 부분 인쇄 자바스크립트 2019.01.16 1588
197 cross site scripting을 막기위한...javascript 2018.07.24 1596
196 key pressing 누르거나 클릭중인 이벤트 예제 2018.08.29 1622
195 시간 계산하기 (시/분/초/ 더하기, 빼기) 2021.08.20 1710
194 jQuery 엘리먼트 선택 2018.10.27 1732
193 팝업창 차단 "허용 메시지" 2018.09.28 1738
192 문자열 안에 쌍따옴표, 홑따옴표 표시하는 3가지 방법 file 2021.08.20 1792
191 반복문 사용할때 태그 식별하기 data-item 2018.07.04 1849
190 자바스크립트 urlencode(), urldecode(), rawurlencode(), rawurldecode() 2018.10.27 1913
189 텍스트박스 입력제한(숫자,영문,한글,특수기호) 2019.01.16 1992
188 Javascript - 화면 캡처 후 서버에 저장하기(html2canvas 사용법, 주의사항) file 2021.03.09 2176
쓰기
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© 2016 JOSHI. All Rights Reserved
© k2s0o1d4e0s2i1g5n. All Rights Reserved