jQuery 이미지 리사이즈(resize) 샘플 > javascript
javascript

jQuery 이미지 리사이즈(resize) 샘플

조회 47회 댓글 0건

이미지 리사이즈 샘플 입니다.

특이점은 이미지를 직접 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



  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 27건 1 페이지
  • profile_image 배열 json 중첩에 대해서 잘 나와 있는곳다양한 형태로 예제가 잘 되어 있습니다.https://rateye.tistory.com/424const data = {    code: 42,    items: [{        id: 1,        name: 'foo'    }, {        id: 2,        name: 'bar'    }]}; function toArray(obj) {    const result = [];    fo…
  • profile_image 누구든 그렇겠지만 본인이 주 언어로 사용하던 언어대로 프로그램을 다른언어에서도 그대로 사용하고 싶은 그런것이 있습니다. 이 부분은 그래서 찾은 것인데요. PHP에서는 연관배열이라고 합니다. 문자가 인덱스로 들어가는 것입니다. 딕셔너리라고 하기도 하고 이런 비슷한 형태를 사용하려면 json 으로 해도 되는 경우가 있습니다.* 배열 문자 인덱스 - 자바스크립트 2차원 배열 사용 하는 방법.물론 아래는 PHP의 배열과는 많이 다르지만 기존에 하던 논…
  • profile_image php에서 filesize 함수에 해당 하는것입니다.아래 처럼 여러가지 형태로 사용이 가능 하다.if ( fs.existsSync(file) ) {    var aStats = fs.statSync(file)    var filesize  = aStats['size'];    var filesize  = aStats.size;    console.log(aStats);    console.log('filesize: ' + fs.statSync(…
  • profile_image php에서 exit;에 해당하는 기능입니다.process.exit()실패코드로 종료하고 싶을때는 process.exit(1);너무 간단하지만. 몰라서 찾음.그리고 한동안 안쓰다가 또 몰라서 찾음.
  • profile_image 파일이 있는지 체크 하는 방법  var is_file  = 0;  fs.stat(data_file, (err,stats) => {    if ( stats.isFile() ){      is_file = 1;      console.log('stats.isFile(): ' + stats.isFile());    }  });  console.log('is_file:' + is_file + "\n");// 함수로 만들어 사용function i…
  • profile_image ◆ 파일을 읽는 방법 입니다.동기적으로 파일 읽기  const data = fs.readFileSync("package.json", "utf-8");  console.log(data);이렇게 캐릭터셋 지정하기 않고 읽어도 된다.const dataBytes = fs.readFileSync(file);◆ 아래는 파일 쓰는(저장) 하는 방법import fs from "fs";......  var file = './result.txt';  fs.wri…
  • profile_image import { mydql, db } from 'mysql';^^^^^^SyntaxError: Cannot use import statement outside a module아래처럼 추가해 주면 된다. 패키지 json 파일을 열어서 아래 처럼 추가 해준 후 저장하면 됩니다.# vim package.json {  "type": "module",  "dependencies": {    "mysql": "^2.11.1"  }}