Total members 11893 |It is currently Tue Nov 12, 2024 9:14 pm Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





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';




_________________
M. S. Rakha, Ph.D.
Queen's University
Canada


Author:
Mastermind
User avatar Posts: 2715
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : crop image using JQuery
 crop image in java     -  
 JavaCV crop image     -  
 resize image using JQuery     -  
 Show loading image from JQuery     -  
 Image-Viewer-Image Processing-Filters-Noise-enhancements     -  
 Move image in front of a background image     -  
 different between cfa image and gray level image     -  
 PNG image to the image you generated     -  
 JQuery Animations     -  
 slide down using JQuery     -  



Topic Tags

JQuery Image
cron





Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com