About / Feedback • Demo • Help / Download
A javascript-(mootools)-only tool to select a part of an image and crop it
Requirements
- Works in Safari 3+, Firefox 3+, Chrome 3+, IE 6-11 and Opera 9+
- Requires mootools 1.23+ with Drag.Move, Element.measure and (for example) PHP to crop the image
Features
- Only 4 DIVs necessary
- Marching Ants effect via CSS..! (Safari and Firefox of course only)
- Shows crop dimensions (w x h) – and x/y-position while moving (configurable)
- Crop-Button inside the frame (optional)
- Hold SHIFT to select a square area
- Also works with scaled images – shows the real size then
- Minimal size, maximal size, initial position, fixedratio (optional) and x-/y-ratio constraints are configurable
- Result: x- and y-position, width and height
Demo
- Try it out here: CwCrop Demo »
Downloads
- Plugin & demo download: Mootools Forge »
Github Repository: github.com/mariofischer/cwcrop »
Hello,
I have a problem if I use originalsize, the initial dimensions of the cropframe are wrong, my fix:
this.orig_minsize_x = this.options.minsize.x; // <<<— save original value
this.orig_minsize_y = this.options.minsize.y; // <<<— save original value
this.options.maxsize.x = ( this.options.maxsize.x * (1/this.orig_to_scaled.x) ).limit(1, this.elemsize.x-2);
this.options.maxsize.y = ( this.options.maxsize.y * (1/this.orig_to_scaled.y) ).limit(1, this.elemsize.y-2);
this.options.minsize.x = ( this.options.minsize.x * (1/this.orig_to_scaled.x) ).limit(1, this.elemsize.x-2);
this.options.minsize.y = ( this.options.minsize.y * (1/this.orig_to_scaled.y) ).limit(1, this.elemsize.y-2);
…
// init crop frame
if (this.options.initialmax) {
$(this.options.cropframe).setStyle("top", 0);
$(this.options.cropframe).setStyle("left", 0);
$(this.options.cropframe).setStyle("width", this.limits.x[1].toInt());
$(this.options.cropframe).setStyle("height", this.limits.y[1].toInt());
}
else {
$(this.options.cropframe).setStyle("top", this.options.initialposition.y);
$(this.options.cropframe).setStyle("left", this.options.initialposition.x);
$(this.options.cropframe).setStyle("width", this.orig_minsize_x.toInt()); <<<— use original value
$(this.options.cropframe).setStyle("height", this.orig_minsize_y.toInt()); <<<— use original value
}
Thanks a lot!
Integrated your fix, can be downloaded on Mootools forge.
Hello! How to download version for IE-11? Thank you!
Just use the source-code from the demo page (the code and files which are linked there). I’ll have a look at the included demo-version but probably this will take some time.
when I change the picture crop-orig.jpg in style by another picture that contains another size, the crop no longer retains the same performance
Hi – I’m not exactly sure what you mean, do you have a code example somewhere? Thx.
Try to change another picture sizes and you will see the difference if retains taille css 200,192
Very good! Is it possible to have a polygon instead of a square? If so, how?
Cheers,
Jan
Well – no.
At least I don’t see any possibility without using Canvas (incompatible with older browsers) and taking me several months (quite incompatible with my time now :).
The only thing I found at the first look might be this (I only had a quick glance, so no idea how useful this is):
http://brittonkerin.com/image_region_selector/irs_demo.html
Greetings,
your script seems really nice but I can’t make it work as I would.
I need to crop images which are larger than 430×260, the crop need to keep the 430/260 ratio with 430×260 as min-size and then I plan to resize the croped image to 430/260 with a PHP script. So, the user must be able to crop any image as long as it keeps 430/260 ratio.
I use this script (with lastest mootools core + more) :
#####
// Mootools crop
var ch;
window.addEvent(“domready”, function() {
ch = new CwCrop({
minsize: {x: 430, y: 260},
fixedratio: 1.653846,
onCrop: function(values) {
document.forms[“crop”].elements[“crop[x]”].value = values.x;
document.forms[“crop”].elements[“crop[y]”].value = values.y;
document.forms[“crop”].elements[“crop[w]”].value = values.w;
document.forms[“crop”].elements[“crop[h]”].value = values.h;
alert(“Selected area is: ” + values.x + “,” + values.y + ” @ ” + values.w + ” x ” + values.h);
/*
Here the form should be submitted usually (instead of the alert..):
document.forms[“crop”].submit();
*/
}
});
});
#####
When the script starts, I’ve everything ok, the crop is set to 430×260.
But once I start to resize the crop area it switch from 430×260 to 200×121 then back to 430×260 and vice versa.
Am I doing something wrong ?
Is the script able to only resize the crop with fixed ratio to 430/260 and min-size 430×260 ?
Thanks for any help =]
Hi –
I see. I tried and it seems there are problems with maxsize, so for me it works if I set maxsize like this:
minsize: {x: 430, y: 260},
maxsize: {x: 999, y: 999},
fixedratio: 1.653846,
(…)
Of course you can use another value instead of 999 if the image might be bigger.
Hope that helps – otherwise write a comment!
mario
Hi,
yes it does the trick !
Thanks for your help :)
Thanks. Definitely what I want!
Thank´s for sharing – saw this post long time ago and now I´m going to use it!
Hi Again,
Could you share your php file (one use to crop from coord) didn’t see it when i downloaded the package
thanks =)
Yes that wasn’t supposed to be in the download package, because this depends a lot on what you are going to do – and not everyone uses php as server-side language.
But I’ll have a look and put a standalone script here online – the one I currently use heavily depends on my own framework, so I’ve to rewrite it.
See the latest blog post, this should help:
http://www.chipwreck.de/blog/2011/06/06/crop-an-image-in-php-using-cwcrop/
Hi,
really nice plug in :) however on your demo page, its always crop the same part of the image,even if i customized crop area. is it a bug?
im under mozilla 4.0.1
Hi –
well, the wordpress cache-plugin I use here does its job a little bit too good :) You can press reload on the page with the cropped image, this should help.. But I’ll also check if I can exclude the result page from caching.
(The Mootools plugin itself has no such problems, it simply delivers the coordinates of the cropped area.)
mario
That’s the nice one
thanks
hello,
is it posible to change crop ratio on the fly using form, without refreshing page?
Yes, it’s a bit a workaround – but for me it works well:
Say ch is your CwCrop-Object and cropframe the id of the outer div, then try these two example buttons:
<button onclick=”ch.options.fixedratio=2;ch.checkRatio($(‘cropframe’),null)”>wide</button>
<button onclick=”ch.options.fixedratio=0.5;ch.checkRatio($(‘cropframe’),null)”>tall</button>
Regards,
Mario
Hi,
Thanks for this great script. It works like a charm :-)
I just have one little problem.
The opacity of the image to crop is set to 0.5 : this is ok.
But the crop area appears to be set to 0.5 as well whereas it should be 1.
I tried to modify the css with opacity:1 in #cropframe and #cropframe.active but it does not work.
Do you have an idea how I can fix that ?
Best regards,
The #cropframe has no opacity setting so its opacity is 1.0…
Do you have this problem also with the demo here and if so, in which browser?
Actually, the demo works (I’m using your last version 0.76) but I don’t know why since I have integrated this script in my webpage it can display a different opacity in the image and in the crop area.
I have made a screenshot :
http://img207.imageshack.us/img207/339/sanstitre2rq.jpg
The #cropframe has a background-image set to display the selected image area, maybe that is the problem on your page.
Otherwise, I’d try out the following:
– Make a copy of your page and comment out all your stylesheets
– Step by step enable different parts of your stylesheets, until the problem appears..
(If that really doesn’t help you can send me the URL then I’ll have a look)
“The #cropframe has a background-image set to display the selected image area, maybe that is the problem on your page.”
If the problem is coming from this, is there a way to correct it ?
Otherwise I will do what you advice.
This might happen, if you set the background for #cropframe or .div and overwrite the background-image setting.
UPDATE: Problem solved, the background-images for #cropframe and #imglayer were not the same.
Please show example, how to use fixed ratio. 16:9
Hi –
try this:
ch = new CwCrop({
fixedratio: 1.7777
});
Since 16 / 9 = 1.77777…, that’s the value for the fixed ratio.
mario
Hi there,
Great plugin. One question though. Is there a setting for fixed ratio, cause I couldn’t find it and it would really be usefull?
Thanks,
Daniel
Hi –
you can set
maxratio: {x: 1, y: 1}then there’s a fixed ratio of 1. For other cases it’s not yet possible, but I’ll add it in the next release, good idea.Now it’s added in the current release.