본문내의 모든 이미지 리사이징 적용.
Posted 2008/11/19 14:04, Filed under: 개발/소스이번에 프로젝트 하나를 하다가, 글이 작성될 때 ActiveX 를 통해 WYSWYG 방식으로 들어가다 보니
첨부파일 역시 업로드 후 해당 ACtiveX가 저장하고, 절대경로로 바꾸어 출력한다.
그러다 보니, 별도 첨부처리한 파일 이외에 본문내에 삽입된 이미지의 리사이징이 필요하게 되었다.
급해서 일단 작동만 확인했다.
<head> </head> 사이에 넣어주면 된다.
<script language="javascript" type="text/javascript">
window.onload = function()
{
var imgObj, imgx , imgy;
var limitSize;
imgObj = document.images;
limitSize = 500; // 적용될 가로 픽셀. 세로는 이에 맞는 비율로 줄어든다.
for(i=0;i<imgObj.length;i++)
{
imgx = imgObj[i].width;
if ( imgx > limitSize ) {
imgResize(imgObj[i],limitSize);
}
}
}
// 이미지 리사이즈
function imgResize(imgObj,limitSize)
{
var imgx, imgy;
if (imgObj.width > limitSize)
{
imgx = limitSize;
imgy = (imgObj.height * limitSize) / imgObj.width;
imgObj.width = imgx;
imgObj.height = imgy;
}
}
</script>
그렇다. 실로 무식하지 아니 한가. -_-;
전체 이미지 검사해서 때려 맞추는데....
문제는 일단 window.onLoad 속성이라 테이블이 한번 깨지고 나서 리사이징이 된다는 거..
레이어에 id를 주고 해당 레이어가 로딩이 될때 수행하거나, 아랫쪽에 로딩 레이어로 덮었다가 hidden 시키는 방법이 있을 수 있겠다.
뭐 어차피 js로 꽁수로 돌리는 거니 대충만 하자 -_-;
레이어 onload 시 구현은 dom tree 좀 살펴보고 올려야지.