Hi, I'm trying to create a tool for jQuery which crops images. I know there is already a load of already. The difference with the one i'm trying to make is that i'd like it to act like the Picture Taker interface found in many mac applications like iChat and Adium. I'm stuck completly on how to do it. Can anyone give me any ideas?
Do you know how I could set it up to act like the ImageKit Picture taker?
kennyisaheadbanger
2009-08-03 18:04:17
A:
What feature of ImageKit Picture taker are you concerned about emulating? The Jcrop plugin is pretty slick. The menu system and other ui bits can be accomplished with other Jquery plugins fairly simply. What else are you thinking about?
jimyshock
2009-08-05 16:36:54
You could start out with the <a href='http://jqueryui.com/demos/dialog/#default'>jqueryui dialog</a> windows.
jimyshock
2009-08-05 16:43:51
I mean like on a page i'll be able to crop a picture just like you would when selecting an avatar on Adium/iChatI don't have a clue how to link Sliders and that to the cropper
kennyisaheadbanger
2009-08-05 18:11:54
+1
A:
The jCrop plugin does most of the work. You just need a little logic to stitch it together with a slider widget (like the jqueryui slider).
Here's a quick and dirty example. You'll certainly want to host the files on your own server, but I just wanted to throw something together.
One significant difference is that this code forgets where you have dragged the selection and just resizes it around the current midpoint. If that is important to you, you could probably add that functionality pretty easily.
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
<script type="text/javascript" src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">
#slider { margin: 10px; }
</style>
<script type="text/javascript">
var jcrop_api;
$(document).ready(function(){
imgwidth = $("#cropbox").width();
imgheight = $("#cropbox").height();
aspectRatio=(imgheight > 0)?imgwidth / imgheight:1;
jcrop_api = $.Jcrop('#cropbox',{
setSelect: [ 0, 0, imgwidth, imgheight ],
aspectRatio: aspectRatio
});
$("#slider").slider({
min: 0,
max: 100,
value: 100,
slide: function(e,ui){
updateCrop(ui.value);
}
});
function updateCrop(size){
size = size / 100;
maxX = $("#cropbox").width();
maxY = $("#cropbox").height();
midX = ((jcrop_api.tellSelect().x2 - jcrop_api.tellSelect().x) / 2) + jcrop_api.tellSelect().x;
midY = ((jcrop_api.tellSelect().y2 - jcrop_api.tellSelect().y) / 2) + jcrop_api.tellSelect().y;
midX = (midX < 0) ? midX * -1 : midX;
midY = (midY < 0) ? midY * -1 : midY;
sizeX = $("#cropbox").width() * size;
sizeY = $("#cropbox").height() * size;
x = midX - (sizeX/2);
y = midY - (sizeY/2);
x2 = midX + (sizeX/2);
y2 = midY + (sizeY/2);
// edge conditions
if (x < 0){
x2 -= x2 - x;
x = 0;
if (x2 > maxX) x2 = maxX;
}
if (x2 > maxX){
x -= (x2 - maxX);
x2 = maxX;
if (x < 0) x = 0;
}
if (y < 0){
y2 -= y;
y = 0;
if (y2 > maxY) y2 = maxY;
}
if (y2 > maxY){
y -= (y2 - maxY);
y2 = maxY;
if (y < 0) y = 0;
}
jcrop_api.setSelect([ x,y,x2,y2 ]);
}
});
</script>
</head>
<body>
<img src="http://deepliquid.com/projects/Jcrop/demos/demo_files/sago.jpg" id="cropbox" />
<div id="slider"></div>
</body>
</html>
Jason Francis
2009-08-06 17:44:42
Thnx, sorry but it auto-accepted before I got online... really sorry
kennyisaheadbanger
2009-08-07 11:18:03