JavaScript DHTML/YUI Library/Image Crop

Материал из Web эксперт
Перейти к: навигация, поиск

Connection Manager assisted image crop

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Connection Manager assisted image crop</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/imagecropper/assets/skins/sam/imagecropper.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/imagecropper/imagecropper-min.js"></script>

</head> <body class="yui-skin-sam">

Connection Manager assisted image crop

This example shows how to use <a href="http://developer.yahoo.ru/yui/connection/">Connection Manager</a> to issue an image crop request.

<style> 

   #button1 {
       margin: 1em;
   }

</style> <img src="yui_2.7.0b-assets/imagecropper-assets/yui.jpg" id="yui_img" height="333" width="500">

<script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event,
       conn = null,
       results = null;
   Event.onDOMReady(function() {
       results = Dom.get("results");
       var callback = {
           success: function(o) {
               var json = o.responseText.substring(o.responseText.indexOf("{"), o.responseText.lastIndexOf("}") + 1);
               var data = eval("(" + json + ")");
results.innerHTML = "

" + data.data + "

"; 
           },
           failure: function() {
results.innerHTML = "

An error occurred, please try again later.

"; 
           }
       };
       var crop = new YAHOO.widget.ImageCropper("yui_img", {
           initialXY: [20, 20],
           keyTick: 5,
           shiftKeyTick: 50
       });
       var _button = new YAHOO.widget.Button({
           id: "cropIt",
           container: "button1",
           label: "Crop Image",
           value: "crop"
       });
       _button.on("click", function() {
           var coords = crop.getCropCoords();
           var url = "yui_2.7.0b-assets/imagecropper-assets/crop.php?top=" + coords.top + "&left=" + coords.left + "&height=" + coords.height + "&width=" + coords.width;
           conn = YAHOO.util.Connect.asyncRequest("GET", url, callback);
       });
   });

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


how to make an image croppable with some advanced features.

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Advanced Crop Interface</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/imagecropper/assets/skins/sam/imagecropper.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/imagecropper/imagecropper-min.js"></script>

</head> <body class="yui-skin-sam">

Advanced Crop Interface

This example shows how to make an image croppable with some advanced features.


<img src="yui_2.7.0b-assets/imagecropper-assets/yui.jpg" id="yui_img" height="333" width="500"> <script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
   
   var crop = new YAHOO.widget.ImageCropper("yui_img", {
       initialXY: [20, 20],
       initHeight: (Dom.get("yui_img").height / 2),
       initWidth: (Dom.get("yui_img").width / 2),
       keyTick: 5,
       shiftKeyTick: 50
   });

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Real Time Crop Feedback

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Real Time Crop Feedback</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/imagecropper/assets/skins/sam/imagecropper.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/imagecropper/imagecropper-min.js"></script>

</head> <body class="yui-skin-sam">

Real Time Crop Feedback

This example shows how to use a few of the built in events to real time crop feedback.

<style type="text/css" media="screen"> 

   #results {
       border: 1px solid black;
       height: 83px;
       width: 125px;
       position: relative;
       overflow: hidden;
   }
   #results img {
       position: absolute;
       top: -20px;
       left: -20px;
   }

</style>

<img src="yui_2.7.0b-assets/imagecropper-assets/yui.jpg" id="yui_img" height="333" width="500">

<img src="yui_2.7.0b-assets/imagecropper-assets/yui.jpg">
  • Height: (91)
  • Width: (150)
  • Top: (20)
  • Left: (20)

<script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event,
       results = null;
   
   Event.onDOMReady(function() {
           results = Dom.get("results");    
           var crop = new YAHOO.widget.ImageCropper("yui_img", {
               initialXY: [20, 20],
               keyTick: 5,
               shiftKeyTick: 50
           });
           crop.on("moveEvent", function() {
               var region = crop.getCropCoords();
               results.firstChild.style.top = "-" + region.top + "px";
               results.firstChild.style.left = "-" + region.left + "px";
               results.style.height = region.height + "px";
               results.style.width = region.width + "px";
               Dom.get("t").innerHTML = region.top;
               Dom.get("l").innerHTML = region.left;
               Dom.get("h").innerHTML = region.height;
               Dom.get("w").innerHTML = region.width;
           });
   });

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Resize an image

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>8-way Element Resize</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script>

</head> <body class="yui-skin-sam">

8-way Element Resize

This example shows how to make an element resizable by all 8 handles.

<style> 

   #yui_img {
       position: absolute;
       top: 20px;
       left: 20px;
   }
   #example-canvas {
       height: 200px;
   }

</style> <img src="yui_2.7.0b-assets/resize-assets/yui.jpg" id="yui_img" height="166" width="250"> <script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
       var resize = new YAHOO.util.Resize("yui_img", {
           handles: "all",
           knobHandles: true,
           height: "166px",
           width: "250px",
           proxy: true,
           draggable: true,
           animate: true,
           animateDuration: .75,
           animateEasing: YAHOO.util.Easing.backBoth
       });

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Simple Crop Interface

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Simple Crop Interface</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/imagecropper/assets/skins/sam/imagecropper.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/imagecropper/imagecropper-min.js"></script>

</head> <body class="yui-skin-sam">

Simple Crop Interface

This example shows how to make an image croppable.


<img src="yui_2.7.0b-assets/imagecropper-assets/yui.jpg" id="yui_img" height="333" width="500"> <script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;
   
   var crop = new YAHOO.widget.ImageCropper("yui_img");

})(); </script>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/YUI_Library/Image_Crop&oldid=3995»