자바스크립트 이미지 크기 변경 질문드려요..

본문 바로가기

자바스크립트 이미지 크기 변경 질문드려요..

작성일 2013.03.07댓글 1건
    게시물 수정 , 삭제는 로그인 필요

 이미지가 비율에 맞게 줄어들어야 하는 데...해서

 

 var img = document.createElement("img");
      img.src = "/Upload/image/" + name;
      var tableTD = document.getElementById("imgTable");
      tableTD.appendChild(img);
      img.style.maxWidth = "180px";
      img.style.maxHeight = "180px";

 

 

이렇게 해놨더니 알아서 비율에 맞게 줄어들더라구요...그런데 이방법이 혹시 익스플로러 버전에 따라

 

안먹힌다던지.....인터넷 브라우저가 바뀌면 안된다던지..그런게 있을 까요?

 

var img = document.getElementById("Animal");
            img.style.maxWidth = "236px";
            img.style.maxHeight = "205px";

 

그리고 맨위에 소스는 보시는 바와 같이 img태그를 생성시키며 리사이즈 시키는 것이고.

 

두번째 아래소스는 이미 이미지가 있을 때 id로 가지고 와서 똑같이 리사이즈 처리하는 건데

 

아래 것은 안돼요... 왜그럴까요?

 

친절한 답변 부탁려요

 

이미지 리사이즈 처리하는 것 다른 방법도 있는 거 인터넷 찾아보면 많이 나오니 알고 있구요..

 

위에 질문에 대한 답변만 좀 부탁드릴께요~~~♬


#자바스크립트 이미지 넣기 #자바스크립트 이미지 슬라이드 #자바스크립트 이미지 크기 조정 #자바스크립트 이미지 변경 #자바스크립트 이미지 호출 #자바스크립트 이미지 업로드 #자바스크립트 이미지 출력 #자바스크립트 이미지 미리보기 #자바스크립트 이미지 용량 줄이기 #자바스크립트 이미지 다운로드

profile_image 익명 작성일 -

아래거는 시점에 따라서 달라집니다.

이미지가 onload 이벤트가 발생하는 시점에 이후에야 이미지 사이즈를 제대로 알아올 수 있습니다.

그렇기 때문에 모든 이미지가 있는 부분에 이미지가 onload 이벤트 발생 시점마다 이벤트를 걸어서

리사이징 해주셔야 합니다.

그이전에 해주면 사이즈 조정이 안됩니다.

그리고 이미지 다 불러진다음에 리사이징 하시면 이미지가 커졌다가 다시 작아지는 형태로 사용자

에게 이상하게 비춰질 수 있습니다.

그래서 가장 좋은 방법은 섬네일이라고 이미지 등록시 작은 이미지로 프로그램 단에서 자동으로 생성해서

서버에 떨군다음에 작은 이미지를 보여주는 것이고 그게 안될경우 보여질 이미지를 모두 가져와서

JavaScript 단에서 메모리상에서 onload 이벤트를 발생시켜 이미지 크기르 구한 다음에 절절한 크기로

조절해서 뿌려주는것이 최선의 방법 입니다.

썸네일로 구현이 어려운 경우 아래와 같이 구현을 하시면 됩니다.

<!DOCTYPE html>
<html>
    <head>
        <title> sjisbmoc </title>
<script language='javascript' type='text/javascript'>
//<![CDATA[

var imgs = new Array();
imgs.push('http://sports.donga.com/IMAGE/2011/03/14/35563261.2.jpg');
imgs.push('http://ojsfile.ohmynews.com/STD_IMG_FILE/2011/0314/IE001286143_STD.jpg');
imgs.push('http://img.seoul.co.kr/img/upload/2011/03/14/SSI_20110314210504_V.jpg');
imgs.push('http://photo.hankooki.com/newsphoto/2011/03/14/jaharang201103140942300.jpg');
imgs.push('http://image.fnnews.com/images/fnnews/2011/03/14/110314_150414410.jpg');
imgs.push('http://contents.dt.co.kr/images/201103/2011031402012169697015.jpg');
imgs.push('http://image.chosun.com/sitedata/image/201103/14/2011031402102_0.jpg');
imgs.push('http://res.heraldm.com/content/image/2011/03/15/20110315000073_1.jpg');

window.onload = function(){
    for(var i=0; i<imgs.length; i++){
        var img = new Image();
        img.src = imgs[i];
        img.target = 'img'+i;
        fncSetFun(img, imgs[i]);
    }
}

function fncSetFun(img, url, tgt){
    img.src = url;
    img.onload = function(tgt)
    {
        var mhi = 150; // 가로크기 제한
        var mwd = 200; // 세로크기 제한

        this.width  = this.width;
        this.height = this.height;
        var ighi    = parseInt(this.height*mwd/this.width);
        var igwd    = parseInt(this.width*mhi/this.height);

        if(this.width>mwd){
            if(ighi>mhi){
                ighi    = mhi;
            }else{
                igwd    = mwd;
                ighi    = ighi;
            }
        }else{
            if(this.height>mhi){
                ighi    = mhi;
            }else{
                igwd    = this.width;
                ighi    = this.height;
            }
        }

        var nimg    = document.createElement('img');
        var tgt     = document.getElementById(this.target);
        nimg.src    = this.src;
        nimg.width  = igwd;
        nimg.height = ighi;
        tgt.appendChild(nimg);
        tgt.innerHTML += '<br />사이징전 width : ' + this.width + ' * ' + ' height : ' + this.height + '<br />사이징 후 width : ' + igwd + ' * ' + ' height : ' + ighi
    }
}

function getSizeImg(tgt,num){
    tgt.src     = img.src;
}

//]]>
</script>
<style>
div.grp {width:100%; padding:10px;}
div.cont {border:1px solid #000000; text-align:center; width:210px; height:200px; padding:4px; float:left;}
div.sap {width:10px; float:left;}
</style>
    </head>
    <body>
<form name='frm'>

        <div class='grp'>
            <div class='cont' id='img0'></div>
            <div class='sap'></div>
            <div class='cont' id='img1'></div>
            <div class='sap'></div>
            <div class='cont' id='img2'></div>
            <div class='sap'></div>
            <div class='cont' id='img3'></div>
        </div>
        <div class='grp'>
            <div class='cont' id='img4'></div>
            <div class='sap'></div>
            <div class='cont' id='img5'></div>
            <div class='sap'></div>
            <div class='cont' id='img6'></div>
            <div class='sap'></div>
            <div class='cont' id='img7'></div>
        </div>

</form>
    </body>
</html>

연관된 질문 답변 리스트

자바스크립트 다시 질문드려요

... 이미지파일명을 변경해서 그림이 바뀌게 할 수 있을까요? 그리고 자바스크립트에서... 답변 부탁드려요 첫 질문에 대한 예 입니다. [code]...

자바 스크립트 이미지 질문

... 이니까 이것을 그대로 나누어서 설명을 드려보겠습니다. 1. 이미지를 이미지는... 어떤 자바스크립트를 만드실지는 질문하신 분의 마음입니다. 그리고 반응을...

자바 스크립트 이미지 크기 자동 조정이요

... 부분이 자바를 쓰는 거 같은데 이미지 크기를 화면 폭 98%에... 하지만 지금 질문과는 동떨어진 내용이니 올려주신 소스를 가능하면 변경하지 않고 적어 드리겠습니다.

크기,스크롤바 관련 자바스크립트 질문...

... 창 크기가 어느정도 이하로 줄어들면 자동으로 스크롤바가 나타나도록 하는 자바스크립트 소스를 구하고 있는데 찾기 힘드네요. 고수님들의 빠른 답변 부탁드려요~^00...

자바스크립트 레이어 크기 변경하기...

... 제가 듣기로 자바 스크립트는 웬만한 브라우저에서 다... 마우스 이벤트를 통해 레이어 크기를 변경하는 것뿐이므로, 복잡하지 않은 스크립트가 가능할텐데...