jQuery 이미지 리사이즈(resize) 샘플
이미지 리사이즈 샘플 입니다.
특이점은 이미지를 직접 resize 하는 것이 아니라 밖에 감싸고 있는 div를 이용해서 리사이즈 하면서 크기가 변경 되면 실시간으로 img 태그의 이미지의 크기를 변경 처리 합니다.
이미지 resize 시작할때와 마무리(멈춤 - 끝났을때) 테두리를 변경해 줍니다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>apply_resize</title>
<style>
.segrip {
width: 12px;
height: 12px;
border: 1px solid #00f;
background-color: #00f;
bottom: -7px;
right:-7px;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
</head>
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<body>
<div id="test1" style="width: 555px; height: 400px; border: solid 1px #777"> </div>
</body>
</html>
<script>
var id_name_main = 'test1';
var id_num = 1;
function get_div_name( type, id_num ) {
if ( type == 'img' ) return 'img_' + id_num;
if ( type == 'img_border' ) return 'img_br_' + id_num;
}
function get_default_data( id_name )
{
var id_img = get_div_name( 'img', id_num );
var id_img_b = get_div_name( 'img_border', id_num );
var img_url = './test1.jpg'; // 이건 base64로 바로 표현 될 수 있다.
var str = '';
str += '<div id="' + id_img_b + '" style="position:absolute; border: soild 1px #f00; width: 111px; height: 111px;">';
str += ' <img id="' + id_img + '" src="' + img_url + '" width=111; height=111; style="position:absolute;left:0;top:0;" />';
str += ' <!-- img와 감싸고 있는 div의 크기가 맞아야 아래 segrip 위치가 정확히 위치한다. -->';
str += ' <div class="ui-resizable-handle ui-resizable-se segrip"></div>';
str += '</div>';
return str;
}
function apply_resize()
{
var id_img = get_div_name( 'img', id_num );
var id_img_b = get_div_name( 'img_border', id_num );
$('#' + id_img_b)
.resizable({
handles: {
'se': '.segrip',
},
start: function(e, ui) {
$('#'+id_img_b).css('border','dotted 1px red');
},
resize: function(e, ui) {
$( "#"+id_img ).each(function() {
$(this).css("width", ui.size.width);
$(this).css("height", ui.size.height);
});
},
stop: function(e, ui) {
$('#' + id_img_b).css('border','solid 0px red');
},
});
}
// start
$(document).ready(function() {
id_num += 1;
var img_layer = get_default_data( id_num );
$( '#' + id_name_main ).append(img_layer);
apply_resize();
});
</script>
● jQuery 이미지 리사이즈(resize) 참고한곳
https://jqueryui.com/resizable/#max-min
https://webclub.tistory.com/18