½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > javascript ¼Ò½ºÃ¢°í > À̹ÌÁö°ü·Ã > À̹ÌÁö Å©·Ó(Crop) ¿µ¿ªÁöÁ¤ »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
HTML
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
À̹ÌÁö Å©·Ó(Crop) ¿µ¿ªÁöÁ¤
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù À̹ÌÁö°ü·Ã
´Ù¿î·Îµå Ƚ¼ö 872 ȸ
°£´Ü¼³¸í À̹ÌÁö¿¡´Ù Å©·Ó(Crop) ¿µ¿ªÀ» ÁöÁ¤Çؼ­ ÁÂÇ¥À§Ä¡°ª ¹× °¡·Î,¼¼·Î Å©±â¸¦ º¼ ¼ö ÀÖ½À´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="en-us" />
 <title>Basic cropper test</title>
 <script src="./lib/prototype.js" type="text/javascript"></script>
  <script src="./lib/scriptaculous.js?load=builder,dragdrop" type="text/javascript"></script>
 <script src="./cropper.js" type="text/javascript"></script>


 <script type="text/javascript" charset="utf-8">

  // setup the callback function
  function onEndCrop( coords, dimensions ) {
   $( 'x1' ).value = coords.x1;
   $( 'y1' ).value = coords.y1;
   $( 'x2' ).value = coords.x2;
   $( 'y2' ).value = coords.y2;
   $( 'width' ).value = dimensions.width;
   $( 'height' ).value = dimensions.height;
  }

  // basic example
  Event.observe(
   window,
   'load',
   function() {
    new Cropper.Img(
     'testImage',
     {
      onEndCrop: onEndCrop
     }
    )
   }
  );


  if( typeof(dump) != 'function' ) {
   Debug.init(true, '/');

   function dump( msg ) {
    Debug.raise( msg );
   };
  } else dump( '---------------------------------------\n' );


 </script>
 <link rel="stylesheet" type="text/css" href="debug.css" media="all" />
 <style type="text/css">
  label {
   clear: left;
   margin-left: 50px;
   float: left;
   width: 5em;
  }

  html, body {
   margin: 0;
  }

  #testWrap {
   margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
  }
 </style>
</head>
<body>
 <h2>Basic cropper test</h2>
 <p>
  Some test content before the image
 </p>

 <div id="testWrap">
  <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
 </div>


 <p>
  <label for="x1">x1:</label>
  <input type="text" name="x1" id="x1" />
 </p>
 <p>
  <label for="y1">y1:</label>
  <input type="text" name="y1" id="y1" />
 </p>
 <p>
  <label for="x2">x2:</label>
  <input type="text" name="x2" id="x2" />
 </p>
 <p>
  <label for="y2">y2:</label>
  <input type="text" name="y2" id="y2" />
 </p>
 <p>
  <label for="width">width:</label>
  <input type="text" name="width" id="width" />
 </p>
 <p>
  <label for="height">height</label>
  <input type="text" name="height" id="height" />
 </p>

</body>
</html>


 


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 32257655 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.