ImgAreaSelect version 0.9.2 is out. This version fixes a few minor bugs, and introduces a new option that allows you to completely remove the plugin from the image that it was attached to. Thanks to all the people who helped me by reporting bugs and sending feedback.
I have also added a new example to the Advanced Usage page — it demonstrates an extension of the plugin API that allows you to animate the selection area.
Hi,
the “remove” attribute doesn’t work for me when i use it like that :
$(“#myobject”).setOptions({ remove: true });
If I use it without any other options, nothing happened. I still have a croping area on my image. If I use it with “hide” option, the cropping zone looks to disapear but in fact, if you drag an area on the image, the plugin is still active !
Tell me if this option really works.
You should use it like this:
$('img').imgAreaSelect({ remove: true });I think I’ll add an example of how to use this option to the documentation, for clarity.
thanks, it’s works fine !
why my way to write was wrong ?
tks !
To put it simply, the
removeoption is a special one and can only be used with the$(...).imgAreaSelect()call, not withsetOptions(). The same rule applies to theinstanceoption.Additionally, in your code you’re calling
setOptions()directly on the jQuery object$("#myobject"), while you should get an instance of imgAreaSelect first, e.g.:$("#myobject").imgAreaSelect({ instance: true }).setOptions(...)Hi Michal,
in fact, I really did like that :
var wimg = $(‘#myObject’).imgAreaSelect( { instance: true, ….. });
it’s why I thougt I was able to do like this, but, anyway.
Thanks a lot for your answers, and for this nice tool, ++
Hello Michael,
Awesome script you’ve got here. Really very convenient and useful.
On the link above, while it works, I don’t see the rubber band as I’m selecting my area. Any ideas?
By the way, the test I’m running on that page came from http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/
Is it possible that the code for the three javascript libraries has somehow gotten out of sync with your new version?
@David: You need to include a style sheet (http://odyniec.net/projects/imgareaselect/usage.html#style-sheets). You’re probably correct about that tutorial’s code being out of sync, I suppose they’re using an older version of my plugin — prior to version 0.9, no style sheet was required.
Hi Michal,
I’ve got another question.
in my case, i need to click on a “tool” button to lauch the crop script, like that :
$(“#tool_crop”).click(function() {
$(“#myobject”).imgAreaSelect({
instance: true,
handles: true,
x1: 0,
y1: 0,
x2: 400,
y2: 533,
onInit: preview,
onSelectChange: preview
});
// ajax on save link
$(“#save_crop”).one(‘click’,function() {
$.ajax({
type: “POST”,
…
});
});
});
// another tool button, lauch on the image another effect
$(“#tool_rotate”).click(function() {
$(“#myobject”).imgAreaSelect({ remove: true )};
// … script
});
the problem is, when i click on the tool crop button, then click to another tool button (like rotate, which remove the crop plugin), and then click a new time on the crop button, and if i save my image, i’got 2 ajax requests ! instead of just the last one.
do you know why ? is it a mistake from me or maybe the remove function didn’t kill totally the instance of the imgareaselect object ? thanks !
@regis: Based on your description and code fragments, I think the
.one()call that binds the click event handler for#save_cropis actually executed twice. This is what might be happening:1. “when i click on the tool crop button” -> first
#save_cropclick event handler is bound2. “then click to another tool button”
3. “then click a new time on the crop button” -> second
#save_cropclick event handler is bound4. “i save my image” -> both first and second handler gets executed
So you can either
unbind()any previous#save_cropclick event handlers before binding the new one, e.g.:$("#save_crop").unbind("click"); $("#save_crop").one(...
…or move the binding code elsewhere, so that it’s not executed multiple times.
Hope that helps.
you’re right ! it’s so simply…
!
one more time, thx a lot
Hi,
This looks just like what we need but I’m struggling to get it working. I’ve included all the js and css files in the tag and set the id of the image i want to work on but it just isnt doing anything – not sure what im doing wrong. Here is my code:
$(document).ready(function (){$(‘img#header_image’).imgAreaSelect({handles: true,onSelectEnd: someFunction});});
then:
any ideas whats wrong?
Kol
Hi,
please ignore the last comment: the error I am getting says that jQuery (three times) is not defined then that .imgAreaSelect is not a function.
Cheers
Kol
@Colin: It appears the jQuery file is not loaded — make sure you’re specifying the correct path in the
srcattribute of thescriptelement.Hi Michal,
Exccelent script and job. But I’ve got a question:
In my test enviorment of your script I would like to upload, use preselect in a fixed size (360×270) aspectratio 4:3. And your sollution does that. But when I click the selectionbox it get smaller. And I tried to make it in a fixed size.
This is the site:
http://test.zfczuidlaren.nl/crop2/acidcropv0.5/
This are the parameters I use:
.imgAreaSelect({
aspectRatio: ‘4:3′,
handles: false,
fadeSpeed: 200,
resizeable:false,
maxHeight:360,
maxWidth:270,
minHeight:360,
minWidth:270,
onSelectChange: preview,
x1: 10,
y1: 10,
x2: 370,
y2: 280
});
Thanks
@Frans:
The option name is misspelled — it should say “resizable”, not “resizeable”.
Hello Michal,
I really like what you have done with this plugin. I am working on using this plugin to add cropping marks to for an image shopping cart. Everything is working great, except when the selection area touches the top and bottom of the image borders, the top/bottom divs, div.imgareaselect-outer, show up as a grey box.
Example: http://dev.instaproofs.com/imgAreaSelect/IE%20bug%20with%20imgareaselect-outer.png
I added a couple extensions to the plugin, but I don’t think they are related to the problem. Any ideas? Just let me know if you need more info. Thanks!
Never mind on my last comment, I figured it out. In my haste to start working with the plugin, I didn’t bother to put a doctype in my demo html code!
@Patrick: Yep, that’s a doctype issue. You’re not the first person to come across this problem, so I should probably add a note about it to the documentation page.
Great plugin! Thanks for your hard work.
Has anyone had issues with google chrome and this plugin? I have my plugin set
$(‘#photo’).imgAreaSelect({ aspectRatio: ‘1:1′, handles: true,
fadeSpeed: 200, minHight: 200, minHeight: 200, x1: 0, y1: 0, x2: 200, y2: 200 ,onSelectChange: preview });
It doesn’t allow for me to move the box in Chrome, I can click and the box will shift but I cannot resize the box or drag it.
I’m using 0.9.2.
Any help would be appreciated.
Thanks,
Tony
Michal, I am seriously stuck with 0.9.2: I got some code that works only in FF and fails everywhere else. Now, I’m a Firebug man and I am struggling Dragonfly and Chrome. Anyway, when I hit doResize() for the first time, there’s some limiting going on for vars called x1 and y1. Trouble is, these are “undefined” and the result of the maths is NaN. Whether this is the cause of my problem, I find too early to tell. My invocation is like so:
var ias= img.imgAreaSelect({
aspectRatio: “1:” + (selHeight/selWidth),
handles: true,
instance: true,
onSelectChange: onSelectChange,
parent: canvas,
persistent: true,
show: true,
x1: 0, y1: 0,
x2: Math.floor(p*selWidth), y2: Math.floor(p*selHeight)
});
Any idea what I might be doing wrong?
Thanks.
Some more debugging reveals a fluke:
It seems that adjust() is called twice upon initialization. I do not understand why that is. In the first pass, the selection is all 0s and the test in line #156 easily fails and doResize() is thus not called. On the second pass, selection now holds my correct X1, …, y2 settings and the test fails again because, in FF, x2 === imgWidth and y2 === imgHeight. In Opera and Chrome, the maths doesn’t work out so well: x2 works out to be imgWidth+1, y2 imgHeight+1. And so doResize() is called and falls flat on its face coz X1 and X2 aren’t initialized, as mentioned before. I fixed up the code like so
x1 = min(selection.x1, left + imgWidth);
which means that Chrome is now showing a selection rectangle. There’s still trouble, though, coz the [top,left] of the selection rectangle is at [0,0] in Chrome, whereas FF attaches it to [padding-left,padding-top]. Please advise.
And yet more debugging. There’s browser detection code in your code that is suggestive of you targeting IE? Which version of IE did you test against? The entire img-ready test in line #686 is failing miserably for me in IE6. IE6 reports img.complete === false and img.readyState === “loading” although I am 100% certain that my image has loaded … simply because I am actually initializing imgAreaSelect from WITHIN img.load(…)
)) So I am guessing that IE will only modify those state variables once the .load event handler returns. I noticed somewhere along this blog someone writing that imgAreaSelect won’t work with IE6. I find that when I kill that test and simply call imgLoad(), it works just as well as in the other browsers…
@Ollie:
My reply is a bit late, so I don’t know if you still have the problem that you described. Anyway, I think the issue might be related to the fact that you’re initializing imgAreaSelect in the image’s
loadevent handler. Have you checked if the problem goes away if you use the$(window).loadevent instead?Hello,
i have a little problem with the area selection with option show:true. Indeed the selection is always in the first plan. Sometimes i have a popup with a form displayed by ajax, but some fields are not available because my mouse react with the area behind the form. And even in my pop up i can see the area.
So my question is: is it possible to set a “stack order” of elements? So i could see and interact properly with my pop up form, even if my area is set to show:true.
Thank you!
@coco: Try playing with the
parentandzIndexoptions, they might be helpful for positioning the elements in the correct order. You can also try adjusting the position/zIndex of the popup itself.ok……
i made it with a z-index equals to -1 and it worked. Until now i only tried with positive index.
thank you for help