img가 로드되고 난 이후에 w,h 반환받고 이미지 비율에 따른 계산하기

   img가 로드되고 난 이후에 w,h 반환받고 이미지 비율에 따른 계산하기

img 가 로드되고 나서야 w,h 를 반환받을 수 있다. 

이는 아래와 같이 one 메서드에 load 를 사용하여 값을 받도록 하자.

받고 나서 계산하는 프로세스는 간단하다.

1. 컨테이너 (1520x800) 의 세로 비율보다 크면 => 이미지의 세로 사이즈를 임의 변수에 담고 1차함수 계산.

2. 컨테이너 (1520x800) 의 가로 비율보다 크면 => 이미지의 가로 사이즈를 임의 변수 담고 1차함수로 계산.

3. 모두 계산된 tmp_w, tmp_h 는 이미지보정 css에 반영해 준다. 끝

구체적인 내용 설명과 정리는 나중에..  

(function ($) {

    $.mathUtils = {

randomize: function($min, $max, $maxContainBool){

$maxContainBool = $maxContainBool || true; //max값 포함여부(기본true)

return Math.floor(Math.random() * ($max - $min + $maxContainBool)) + $min;

},

distance: function($A, $a, $B, $Ax, $Bx)

{

// 1차 함수

var Ax = $Ax || 0;

var Bx = $Bx || 0;

var b = ($B - Bx) / ($A - Ax) * ($a - Ax) + Bx;

return b;

}

};

})(jQuery);

//ex

var img = "<img src='iden/upload/mapbg/"+_nGID+"/"+BGFILE+"'/>";

_map_area.html(img).css({"opacity" : OPACITY / 100});

_map_area.find('img').one("load", function(){

var IMAGE_W = 1520;

var IMAGE_H = 800;

var image_w = _map_area.find('img').width();

var image_h = _map_area.find('img').height();

var tmp_w;

var tmp_h;

if( IMAGE_H < image_h || IMAGE_H > image_h ){

tmp_h = IMAGE_H;

tmp_w = $.mathUtils.distance( IMAGE_H, tmp_h, IMAGE_W, 0, 0 );

}

console.log( tmp_w, tmp_h );

if( IMAGE_W < image_w ){

tmp_w = IMAGE_W;

tmp_h = $.mathUtils.distance( IMAGE_W, tmp_w, IMAGE_H, 0, 0 );

}

_map_area.find('img').css({"width":tmp_w+"px", "height":tmp_h+"px"});

});