Thumbnail Drag then Crop like facebook using mootools
I like facebook profile code, when you upload picture you can drag and drop it inside a small box, to get a thumbnail showing the good part of the picture.
It’s very easy to do it using mootools core and mootools Drag plugin
Click here to see demo
First you have to call the mootools core and mootools Drag plugin
<script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script> <script src="mootools-1.2.3.1-more.js" type="text/javascript"></script>
The Javascript code :
var DivID = $('CropFrom');
var ImgID = $('CropMe');
var InputUrlID = $('UrlID');
var InputTopID = $('TopID');
var InputLeftID = $('LeftID');
InputUrlID.set('value',ImgID.get('src')); // Add URL to form
var DragInDiv = new Drag(DivID, {
modifiers: {
x: 'scrollLeft',
y: 'scrollTop',
},
style: false,
invert: true,
onSnap: function(el){
ImgID.setStyles({'opacity':0.5})
},
onComplete: function(el){
ImgID.setStyles({'opacity':1})
InputTopID.set('value', ImgID.getCoordinates(DivID).top); // Add new TOP to form
InputLeftID.set('value', ImgID.getCoordinates(DivID).left); // Add new LEFT to form
}
});
CSS code :
#CropFrom {
height : 100px;
width : 100px;
overflow : hidden;
cursor : move;
margin : 0 auto;
}
The Html code :
<div id="CropFrom"> <img id="CropMe" src="elkalidi_abdelkader.jpg" /> </div> <input id="UrlID" type="hidden" name="url" value="" /> <input id="TopID" type="hidden" name="top" value="0" /> <input id="LeftID" type="hidden" name="left" value="0" />
Here is the
nice trick man, keep on
just what i needed
Hi,
Thanks for your script! Need help to fix issue with IE-6 image creation is working but unable to drag image..
add this o JS code :
document.ondragstart = function (){
return false;
};
thank you
hey this is great. I’m pretty new, can you tell me how to save out the new picture? Thanks alot
nice work
buddy can you tell me how can I implement this script step wise? its little vague. Im not an expert so need help. how can I do it in facebook?
buddy please help… the new image it’s generating is not using the correct top and left in Firefox.. It’s just using the default cordinates and showing the top left part of the picture as the new image
Yeah… love it…!!
just what i needed…!!
Thanks a lot man… love u
This is a fantastic way of cropping an image. If you look at twitter and many other services they expect you to upload or crop a perfect square for an avatar, this is better aimed at people’s ability.
However like aparse commented above, how do you save the image to a directory once the image is uploaded and placed in the box to be dragged?
I gave it a shot but my PHP isn’t as good as yours. Any help would be appreciated, I could give you the code I have created so far with my image upload.
@Dan
imagejpeg($im,”directory/picture_new_name.jpg”,100);
[...] … img#imgid { width: 100px; height: 200px; } Simply specifying the width and height of the … Thumbnail Drag then Crop like facebook using mootools …Your comment. Name (required) Mail (will not be published) (required) Website. Friends. Mohammed [...]
Thanks a lot!!!
Need help–
I have implemented the same functionality in ASP.Net(C#)
It is working in Mozilla FF and Crome.
But there is problem in IE.
Can you help?
@Bharati : where is the problem ? any link ?
@UpDel:The problem is in the drag functionality.
I am uploading an Image but the Grag functionality is not working.
The error is at the line
InputUrlID.set(‘value’,ImgID.get(‘src’));
And the error is:Object doesn’t support this property or method
Thanks.
I worked on the above said peoblem..
It was because-
.set and .get methods do not work on IE…instead we need to use getAttribute and setAttribute..
Now the Problem is in the following line:
InputTopID.setAttribute(‘value’,ImgID.getCoordinates(DivID).top);
what to write for the ‘ImgID.getCoordinates(DivID).top’ so that it will work in IE?
Can anyone help?
Nice little script. How do you integrate this with an upload form? I am a bit stuck.
Previously, my upload form allowed the user to upload an image. The display on the front end would then crop their image (using the GD library) to a certain thumbnail. Problem was, it was cutting off vital parts of some photos, and they wanted more control. I need the image to be a certain size (i.e. all of them must be 150w x 150h), so just resizing them doesn’t do the trick either, unless I want to distort them.
So, this script you have here would be great, if I could find a way to integrate it into my upload form. Right now, the upload form uses a standard type to allow the user to select a file. What I am thinking is, once they select a file and press submit, it could land on a page where the file is inputted into your script. Perhaps there is a better way.
Please let me know your thoughts if and when you get a chance. Thanks!
Ryan
@Bharati
Look : Drag to Crop mootools class
@Ryan
Post you script !
please help
This code did not work on a shrepoint 2010 webpart. please suggest any workaround. or any updated code for the same functionality on sharepoiny 2010 webpart
I would love to use this script but am having issues understanding how I would implement it into my current image gallery management system. Everything is in place, I just need to know how to move the generated thumb to the “thumbs” folder rather than outputting it under the generate button. Is there any way I can do this?
Hi dear Friend I feel this script is really user full to me! Right now I’m using this script and upgrade it little bit to make it like similar to facebook crop script. But right now I’m stuck on one point and need your little help. so suppose user open the page where user can crop image and make new thumbnail by dragging and press save or generate thumbnail button so it’ll give us top left points and based on that I can generate new image but what I want to do know I’ll save those left top point in db and when again user come to same place to generate new image that user can see their previous selection on that drag div.
Thank you in Advance.
Hi @Sam, please check this http://updel.com/drag2crop/
Hi many many thanks @UpDeL for your help on this.
This is better than any i have found before
gud work..but i have small problem… when crop image the black line come in side…any one help me to solve this problem.
Ohh its really fantastic. May thanks for this