http://www.okjsp.net/seq/261351
큰 이미지와 작은 이미지가 있습니다.
작은 이미지를 클릭하면 큰 이미지 자리에 보여주려고 합니다.
이 때에 비율을 유지하려고 하는데요.
앱에서 실행 할 때, 기기마다 사이즈가 다르기 때문에
큰 이미지의 크기를
width="100%" height="auto;"
이렇게 두었습니다.
그리고 작은 이미지를 클릭하면 실행하는 자바스크립 함수에서
var bi = document.getElementById("bigimage");
var bi_width = bi.style.width;
var bi_height =bi.style.height;
이렇게 해서 큰 이미지의 사이즈를 받아 오도록 했는데요.
제가 하고자 했던 것은
큰 이미지 사이즈에 맞게
작은 이미지가 비율이 조정되어서 들어갔으면 했던 것인데,
막상 실행을 해보니
작은 이미지의 사이즈가
width="100%" height="auto;" 이렇게 인식이 되는 것 같습니다.
그래서 질문드립니다.
width="100%" 의 실제 길이를 알수 있나요?
http://www.okjsp.net/seq/261304 에서 이어지는 질문입니다.
답변1.
이미지 파일에 대한 사이즈를 불러 올 수 있던가요? 보안상 다 막혔을 텐데요?
해당 파일을 서버 측에서 Java 로 읽어서 Java 의 이미지 처리 API 로 사이즈 구해서 축소해버리던지 아니면 비율만 구해서 다시 클라이언트에 전송하는 방법을 쓰시는게 좋을 것 같은데요.
물론 이 통신은 ajax 로 하셔야 할꺼구요.
이미지 파일 업로드시 보통은 원본으로 축소된 썸네일을 자동 생성해서 두 개의 이미지를 보관하게 만듭니다. 경로만 다르게 해주면 파일명 기준으로 쉽게 사용 가능하니까요.
내 답변 :
답변 감사합니다.
그런데 제가 아직 초보라 해주신 말씀이 이해하기 어렵네요..
앱을 수정중이고요. 웹뷰를 사용중이고요.. jsp에서 이미지가 보입니다.
이 경우에도 말씀해주신 보안 부분이 걸리나요?
이미지 파일은 DB에서 가져오게 됩니다..큰이미지 작은 이미지 모두 그렇고요..
음.. 어렵네요.. api, ajax더 찾아보겠습니다.
답변1-1
앱이라면 이야기가 다를 수 있겠습니다만, 이전의 PC 용 웹브라우저에선 이미지 크기를 미리 알 수 있는 방법이 있었는데 보안상 다 막혔습니다. 앱에서라면 이야기가 다를 수 있겠네요. 앱이라는 말을 못봐서 PC 기준으로 설명드린 겁니다.
내 답변1-1
제 설명이 부족했습니다.
어차피 웹뷰라 상관이 없을 줄 알고 말씀을 안드렸습니다..
추가 질문드립니다.
이미지 사이즈 받아왔습니다.
마지막에
$(this).css("height", maxHeight); 이런식으로 리사이즈 까지 됐습니다.
그런데 마지막에 작은 이미지를 큰 이미지 자리에 넣어야 하는데요.
사이즈는 수정되어도 이미지를 받아오지 못합니다.
document.getElementById("bigimage").src = this
이렇게 출력하려고 하면 이미지 사이즈가 테두리만 보이고 정작 사진은 보이지 않습니다.
this대신에 뭘 써야 하나요?
this.src
imgSrc
this 다 안되네요..
답변2
원하시는게 이게 맞는지 모르겠습니다.
제가 테스트 해봤을 땐 이상 없는 것 같은데요.
참고해 보세요.
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
</head>
<body>
<script type="text/javascript">
<!--
function doShow(imgSrc){
document.getElementById("bigimage").src = imgSrc;
}
//-->
</script>
<div style="background:yellow;"><img id="bigimage" src="noimg" width="100%"></div>
<div style="float:left;padding-right:5px;">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT-JjxAYrnyX3geoTz17hAZjSNsvLVU9325IyLum9JjmJE6fTVHdA" width="64px" onclick="doShow(this.src)"></a>
</div>
<div style="float:left;padding-right:5px;">
<img src="http://cfs12.blog.daum.net/image/10/blog/2008/11/20/20/18/49254698a264b&filename=%EC%86%8C%EB%85%80%EC%8B%9C%EB%8C%801.jpg" width="64px" onclick="doShow(this.src)"></a>
</div>
<div style="float:left;padding-right:5px;">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSKObvB-L1r5AJZTCtB51p6OSZuV5_Er6gGbQs01785KL3JZTkJBw" width="64px" onclick="doShow(this.src)"></a>
</div>
<div style="float:left;padding-right:5px;">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRKcvR5koR23tPZBZZJ8dyfgtB_HONoHg2Hh6S70EPw_GpajP_C" width="64px" onclick="doShow(this.src)"></a>
</div>
</body>
</html>
내답변:
답변감사합니다.
http://www.okjsp.net/seq/261304
제가 어제 올린 소스랑 같네요..;
여기에 큰 이미지의 크기를 받아와서 작은 이미지사이즈를 바꾸는 것을 추가 했는데요.
큰 이미지의 실제 사이즈를 받아와야 하는데
div에 적인 가로 , 세로 길이를 그대로 받아오더라고요
그래서 질문 드린 것입니다. 혹시 방법 아시나요?
'나의질문답' 카테고리의 다른 글
| 인텐트 자기자신을 호출할 때 어떻게 해야 하나요? (0) | 2014.10.01 |
|---|---|
| 리사이즈 후 출력 (0) | 2014.09.25 |
| 이미지 비율 유지하는 것 질문있습니다~ (0) | 2014.09.25 |
| 500에러 질문드립니다.. (0) | 2014.09.17 |
| jstl if문 질문있습니다. (0) | 2014.09.16 |