사진파일 가로/세로 사이즈 구해서 어느쪽이 긴지 구분하는 자바스크립트 없을까요? 정보
사진파일 가로/세로 사이즈 구해서 어느쪽이 긴지 구분하는 자바스크립트 없을까요?본문
안녕하세요, 최신글에 넣으려고 하는데요, 제가 딱 원하는 최신글 갤러리가 없어서요. 제가 원하는 스타일은 있는데 이미지 사이즈가 원래 비율대로 나타나지가 않네요.
이미지 불러올때..
<img src="A.jpg" width=x height=y>
이런식으로 원래 크기와 관계없이 보이는 크기를 조절 할 수 있잖아요. 이걸 노가다로 일일이 지정해줄수도 있지만, 최신글 같은 경우는 자동으로 이미지들을 불러오잖아요. 그러니까 가로가 큰지 세로가 큰지 알수가 없으니 보통 그냥 xxx*yyy 이렇게 이미지 찌그러져도 고정으로 하잖아요.
이걸 원래 이미지 비율에 맞게 가로가 크면 가로가 120 안넘어가게 세로가 크면 세로가 120 이상 안넘어가게 하고 싶어요.
제가 잘 설명하고 있습니까? ^^; 문제 설명하는것도 힘드네요.
이거를 자바스크립트로 구현할 수 있을까요? 제가 알고있는 유명한 자바스크립트 소스 사이트는 다 가봤는데 이런 종류는 없는거 같네요. 다른분들 스킨을 해독할 수 있는 수준은 안되고..
이런게 자바스크립트로 구현되면 어느곳에든지 적용하는게 편할거 같아서요. 혹시 소스 있으신분 계시면 부탁드려요..
감사합니다.
이미지 불러올때..
<img src="A.jpg" width=x height=y>
이런식으로 원래 크기와 관계없이 보이는 크기를 조절 할 수 있잖아요. 이걸 노가다로 일일이 지정해줄수도 있지만, 최신글 같은 경우는 자동으로 이미지들을 불러오잖아요. 그러니까 가로가 큰지 세로가 큰지 알수가 없으니 보통 그냥 xxx*yyy 이렇게 이미지 찌그러져도 고정으로 하잖아요.
이걸 원래 이미지 비율에 맞게 가로가 크면 가로가 120 안넘어가게 세로가 크면 세로가 120 이상 안넘어가게 하고 싶어요.
제가 잘 설명하고 있습니까? ^^; 문제 설명하는것도 힘드네요.
이거를 자바스크립트로 구현할 수 있을까요? 제가 알고있는 유명한 자바스크립트 소스 사이트는 다 가봤는데 이런 종류는 없는거 같네요. 다른분들 스킨을 해독할 수 있는 수준은 안되고..
이런게 자바스크립트로 구현되면 어느곳에든지 적용하는게 편할거 같아서요. 혹시 소스 있으신분 계시면 부탁드려요..
감사합니다.
댓글 전체
자바스크립트는 왜 안좋나요? 서버나 사용자 컴퓨터에 부하가 많이 걸리나요? 궁금하네요.
아, 그리고 width만 지정해주면 세로가 긴 그림은 상대적으로 크게 나와서요, 그래서 위와 같은 자바소스가 있으면 다른 스킨들에도 바로 적용할 수 있고 좋을거 같은데요.. 전 자바가 왜 안좋은지 모르겠네요. 정말 궁금해요.
그런데 그 gd 라는 것이요, 까만도둑님께서 말씀하시는거 보니까 썸네일이 생성되고나면 나중에 게시글 지울때는 일일이 ftp 접속해서 지워줘야하는 불편함이 있다고 해서요..
그런 수고보다는 차라리 로딩 시간이 좀 길더라도 그게 나을거 같아서요.. 그림파일 최신글로 5개 정도 읽는다고 가정하면 로딩시간이 gd 이용하는것보다 훨씬 길까요?
그런 수고보다는 차라리 로딩 시간이 좀 길더라도 그게 나을거 같아서요.. 그림파일 최신글로 5개 정도 읽는다고 가정하면 로딩시간이 gd 이용하는것보다 훨씬 길까요?
불과 얼마전 까지만 해도 서버에 부하 걸린다고 gd lib 않잡아 주는 호스팅 업체도 있었답니다.
아마 지금도 저가형일 경우 그런 곳이 있을지도 ..
지금 제가 관리하는 곳을 확인해보니까, 신경써서 올리는 원본이미지 사이즈가 대충 200~300kb이고
썸네일 싸이즈는 5~10kb 정도 되는군요.
인덱싱속도 트래픽 등등 상식적으로 생각하셔도 되겠습니다.
gd가 대세라고 보시고 작업하시는 것이 두번일을 하지않는 것입니다.
요즘 워낙 회선이 좋으니까 잘 못느끼는 중요한 문제가운데 하나가 아닐까요?
gd
GD Support enabled
GD Version 2.0 or higher
FreeType Support enabled
FreeType Linkage with freetype
GIF Read Support enabled
GIF Create Support enabled
JPG Support enabled
PNG Support enabled
WBMP Support
아마 지금도 저가형일 경우 그런 곳이 있을지도 ..
지금 제가 관리하는 곳을 확인해보니까, 신경써서 올리는 원본이미지 사이즈가 대충 200~300kb이고
썸네일 싸이즈는 5~10kb 정도 되는군요.
인덱싱속도 트래픽 등등 상식적으로 생각하셔도 되겠습니다.
gd가 대세라고 보시고 작업하시는 것이 두번일을 하지않는 것입니다.
요즘 워낙 회선이 좋으니까 잘 못느끼는 중요한 문제가운데 하나가 아닐까요?
gd
GD Support enabled
GD Version 2.0 or higher
FreeType Support enabled
FreeType Linkage with freetype
GIF Read Support enabled
GIF Create Support enabled
JPG Support enabled
PNG Support enabled
WBMP Support
그렇군요.. 근데 gd 어렵네요. ㅎㅎ.. 제 서버호스팅 업체가 싸긴 싼데 구린 업체는 아닌거 같은데.. 우선 gd를 지원해주는지 확인해봐야겠네요. 감사합니다.
대세는 gd 이지만, 제가 어렵게 자바스크립트 소스를 구해서 한번 올려봅니다. 아무 스킨에나 적용할 수 있으니 편하고 좋네요~
<script language="javascript">
function resizeImg(imgObj) {
// 이미지 별도 로딩으로 원래 사이즈 추출
var imgOriginal = new Image();
imgOriginal.src = imgObj.src;
// 가로와 세로 중 어느걸 기준으로 줄일지 결정
var baseAxis;
if ( (imgOriginal.width / imgObj.width) > (imgOriginal.height / imgObj.height) )
baseAxis = 'width';
else
baseAxis = 'height';
// 결정된 기준을 바탕으로 나머지 길이를 리사이징
if (baseAxis == 'width') {
imgObj.height = Math.round(imgOriginal.height * (imgObj.width / imgOriginal.width));
} else { // baseAxis == 'height'
imgObj.width = Math.round(imgOriginal.width *
(imgObj.height / imgOriginal.height));
}
}
</script>
<table>
<tr>
<td>
<!-- width 와 height 에 자신이 원하는 크기를 적어줍니다. 그러면 그 크기 안에 원래 이미지 비율에 맞게 리사이즈 됩니다 -->
<img src="test.jpg" width=120 height=120 onload="resizeImg(this)">
</td>
</tr>
</table>
<script language="javascript">
function resizeImg(imgObj) {
// 이미지 별도 로딩으로 원래 사이즈 추출
var imgOriginal = new Image();
imgOriginal.src = imgObj.src;
// 가로와 세로 중 어느걸 기준으로 줄일지 결정
var baseAxis;
if ( (imgOriginal.width / imgObj.width) > (imgOriginal.height / imgObj.height) )
baseAxis = 'width';
else
baseAxis = 'height';
// 결정된 기준을 바탕으로 나머지 길이를 리사이징
if (baseAxis == 'width') {
imgObj.height = Math.round(imgOriginal.height * (imgObj.width / imgOriginal.width));
} else { // baseAxis == 'height'
imgObj.width = Math.round(imgOriginal.width *
(imgObj.height / imgOriginal.height));
}
}
</script>
<table>
<tr>
<td>
<!-- width 와 height 에 자신이 원하는 크기를 적어줍니다. 그러면 그 크기 안에 원래 이미지 비율에 맞게 리사이즈 됩니다 -->
<img src="test.jpg" width=120 height=120 onload="resizeImg(this)">
</td>
</tr>
</table>
궁금하네요.