Login   Register  
Icontem

File: example-image-cropper.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Daniel Martinez  >  Image Cropper  >  example-image-cropper.html  >  Download  
File: example-image-cropper.html
Role: Example script
Content type: text/plain
Description: Example of use
Class: Image Cropper
Let the user mark an image for cropping
Author: By
Last change:
Date: 2012-07-04 16:53
Size: 2,643 bytes
 

Contents

Class file image Download 
<!--
  Autor:        Daniel Martinez Castillo 
                <danimartcas@hotmail.com> 
                www.webofilia.com
                
  Example of ImageCropper 
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Example of using Image Cropper </title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" media="all" href="styles/cropper.css"/>
        <script type="text/javascript" src="ImageCropper.js" ></script>
        <style type="text/css">
            #image-wrapper {
                text-align: center
            }   
        </style>
    </head>
    <body>
        <div>Your image here:</div> <br />
        <div id="image-wrapper" style="float:left"></div>
        <div style="float:left;margin-left:20px;">
        	<h4>Values in pixels</h4>
        	<label>Width:</label><br />
        	<input type="text" id="iwidth" /><br />
        	
        	<label>Height:</label><br />
        	<input type="text" id="iheight" /><br />
        	
        	<label>Top:</label><br />
        	<input type="text" id="itop" /><br />
        	
        	<label>Left:</label><br />
        	<input type="text" id="ileft" /><br />
        	
        	<label>Values in JSON:</label><br />
        	<textarea id="ijson" cols="50"/></textarea>
        	
        	<br />
        	<input type="button" id="getVal" value="get values"/>
        </div>
        
        <script type="text/javascript">
			
        var iwidth = document.getElementById('iwidth'),
    	   	iheight = document.getElementById('iheight'),
        	itop = document.getElementById('itop'),
    	   	ileft = document.getElementById('ileft'),
    	   	ijson= document.getElementById('ijson');;
    
        var cropper = new ImageCropper({
			                id: 'image-wrapper',
			                src:'src/horse.jpg',
			                maxWidth:'90%',
			                onload : function() {
			                    //console.log(this.getValues()); // Equivalent 
			                },
			                onScaling : function(width,height) {
			                    iwidth.value = width;
			                    iheight.value = height;
			                },
			                onMoving : function(left,top) {
			                	ileft.value = left;
			                    itop.value = top;
			                }
            			});
            
           document.getElementById('getVal').onclick = function() {
        	   ijson.value = cropper.getValues(true);
           } 
           
        </script>
    </body>
</html>