crop image using JQuery

Mon Jan 07, 2013 2:31 am

crop image using JQuery
javascript code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Crop Image using JQuery</title>

<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<script>
 $(document).ready(function(){
 var startMousePos = { x: -1, y: -1 };
 var endMousePos = { x: -1, y: -1 };
 var MousePos={ x: -1, y: -1 };
 var targetWidth=0;
 var targetHeight=0;
 var img = new Image(),

    $canvas = $("<canvas>"),
    canvas = $canvas[0],
    context;
	 
	 
var cropImage = function (top,left,imgWidth, imgHeight) {
     
	    var $croppedCanvas = $("<canvas>").attr({ width: imgWidth, height: imgHeight });
    
    // finally crop the guy
    $croppedCanvas[0].getContext("2d").drawImage(canvas,
        top, left, imgWidth,imgHeight,
        0, 0, imgWidth, imgHeight);
    
    $("body").
        append("<p>same image  but cropped:</p>").
        append($croppedCanvas);
    
};

img.crossOrigin = "anonymous";

// image place. Set Your Image Here
img.src = 'copy.jpg';

img.onload = function () {
    $canvas.attr({ width: this.width, height: this.height });
	targetWidth=this.width;
	targetHeight=this.height;
	
    context = canvas.getContext("2d");
    if (context) {
        context.drawImage(this, 0, 0);
		// Paragrah with id used to get image location
        $("body").append("<p>original image
(press mouse then release on image to crop it):</p>
<p id='targetImg'>").append($canvas).append("</p>");
    }  
};

   // print current mouse location
 $(document).bind('mousemove',function(e){ 
        $("div#info2").text(" Mouse pageX: " + e.pageX + ",  MousepageY: " + e.pageY); 
		MousePos.x=e.pageX;
        MousePos.y = e.pageY;
		  
}); 
$canvas.mousedown(function(){
    jQuery(function(event) {
        // Mouse Position - for mouse button press.
        startMousePos.x = MousePos.x;
        startMousePos.y = MousePos.y;
		 $("div#infox").html("startMousePos.x=("+startMousePos.x
		 +")startMousePos.y=("+startMousePos.y+")");
 

    
});
});
$canvas.mouseup(function(){
        jQuery(function(event) {
   
         // Mouse Position - for mouse button release.
        endMousePos.x = MousePos.x;
        endMousePos.y =  MousePos.y;
		 $("div#infoy").html(",endMousePos.x=("+endMousePos.x
		 +")endMousePos.y=("+endMousePos.y+")");
 

    
	var cropTop = startMousePos.x,
        cropBottom = startMousePos.y,
        cropLeft = endMousePos.x,
        cropRight = endMousePos.y,
        cropWidth = cropLeft - cropTop,
        cropHeight = cropRight - cropBottom;
 
	    
		var pTarget = $("p#targetImg");
		 
		
	 
		cropImage(startMousePos.x-pTarget.position().left,
		startMousePos.y-pTarget.position().top,cropWidth, cropHeight);
     
   
	
    
});
});
});


</script>
<style type="text/css">
p#targetImg
{
font-size:xx-large;
font-weight:bold;
background:#F25201;
height:0px;
width:0px;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
 

 
<div id="infox" >Position</div><br>
<div id="infoy" >Position</div><br>
<div id="info2" >Position</div>
</body>
</html>

Tested On Internet Explorer and Mozilla FireFox. You have to set your image at :
javascript code

img.src = 'copy.jpg';

crop image using JQuery

crop image using JQuery

Topic Tags