I’ve just released version 0.8 of the imgAreaSelect jQuery plugin. The most significant changes in this version are:
- two new options to set the true dimensions of scaled images:
imageWidthandimageHeight, - a new option,
zIndex, to allow explicit setting of the base z-index for plugin elements, - the plugin can now be initialized with either
$(window).load()or$(document).ready().
Additionally, I’ve cleaned up some parts of the code and fixed a few problems. Thanks to all the people who reported bugs, provided feedback, and helped me with the testing.
Stay tuned for version 0.9, which is already under development and should be around fairly soon, with a few more new features. As usual, feedback and feature requests are more than welcome — just post a comment here or send me an e-mail.
This is awesome! Thanks so much for sharing!
Great, really nice! The imageWidth stuff makes things a lot easier if you handle one image in different sizes and with more than one ImgAreaSelects upon it. And z-Index is nice too! Thankx!
But I have one last feature request: would it be possible, to have a callback function called directly after the initialization? Something like “onSelectInit”?
Eddie
@Eddie: This will probably be added in the next version. For now, I’ve made a customized version of the plugin which supports the
onInitcallback function — see this discussion at plugins.jquery.com. By any chance, are you the same Eddie who reported that issue?Hey Michal,
yeah, that’s me! I didn’t get a notification about the new comments, glad I had a look
I’ll append an answer to the discussion!
Eddie
Would like to see the ability to change the image (such as drag-and-drop a new image on the crop area). Maybe even a simple destroy() function, then I can put a new image in place and then reinit. Right now trying to decide between your tool or Jcrop. Thanks.
@Jason: I’m planning to add an option to change the image in version 0.9. For now, I think you could just set a new
srcattribute for the image, then call the plugin with thehideoption, e.g:$('#img').attr('src', 'newimage.jpg'); $('#img').imgAreaSelect({ hide: true, x1: 0, y1: 0, x2: 0, y2: 0 });Great plugin Michal,
I just emailed you with custom edits and features I added in my private version. Hopefully it will be the slightest bit useful.
Best,
Mauvis
I appreciate your good work.
I like your script, and have modified it slightly to work with my site.
There is just one thing that I can not get to work. I would like the .imgareaselect function to display the selected block, but then when you press ’save thumbnail’ it should save without having to move the selection. This is for all the computer illiterates, who do not, or can’t be bothered to select their best bit, and just press the button.
Could the selection also cover the picture as a percentage?
Thanks
@Rob: I’m not sure if my understanding is correct, but I assume you have set up the initial selection with the x1, y1, x2, and y2 options — if so, then you already have the coordinates that you need to submit. You can just use the same values in the “Save thumbnail” click event handler.
As for specifying the selection as a percentage, I don’t think it’s necessary to implement this in the plugin, as in most cases you should be able to calculate the pixel selection coordinates simply by multiplying the image dimensions by the desired percentage.
Very cool plugin!
But, please, I need a function to cleanly remove entire ImageArea from image, for now I do this:
$(‘#myimage’).remove();
$(‘.imgareaselect-selection’).remove();
$(‘.imgareaselect-border1′).remove();
$(‘.imgareaselect-border2′).remove();
$(‘.imgareaselect-handle’).remove();
$(‘.imgareaselect-outer’).remove();
but when I reactivate imagearea strange things happend..
Hi, Michal
I am trying to use your library with asp.net. Unfortunately, I am not able to use it. I have added a folder to hold the scripts provided in the library.
Here is the aspx code sample:
Untitled Page
var $x1, $y1, $x2, $y2, $w, $h;
function selectChange(img, selection)
{
$x1.text(selection.x1);
$y1.text(selection.y1);
$x2.text(selection.x2);
$y2.text(selection.y2);
$w.text(selection.width);
$h.text(selection.height);
}
$(document).ready(function () {
$x1 = $(‘#x1′);
$y1 = $(‘#y1′);
$x2 = $(‘#x2′);
$y2 = $(‘#y2′);
$w = $(‘#w’);
$h = $(‘#h’);
});
$(window).load(function () {
$(‘img#ttt1′).imgAreaSelect({ onSelectChange: selectChange, handles: true });
});
Selection coordinates:
X1:
Y1:
X2:
Y2:
Selection dimensions:
Width:
Height:
Please shed some light.
When render the page, i see following javascript errrors.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6; .NET CLR 1.1.4322; .NET CLR 1.0.3705; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; yie8)
Timestamp: Fri, 26 Jun 2009 15:04:33 UTC
Message: ‘jQuery’ is undefined
Line: 14
Char: 1
Code: 0
URI: http://localhost:2779/Scripts/jquery.imgareaselect-0.8.js
Message: ‘jQuery’ is undefined
Line: 1
Char: 1
Code: 0
URI: http://localhost:2779/Scripts/jquery.imgareaselect-0.8.min.js
Message: Object expected
Line: 25
Char: 2
Code: 0
URI: http://localhost:2779/
@Samuele:
Have you tried using the
disableandhideoptions to deactivate the plugin, then reenabling it withenableandshow?@Mahesh: You should download the jQuery library (available at http://jquery.com/) and include it in the <head> section of your page, before imgAreaSelect.
By the way, the next version of the plugin (0.9), which I’m going to release in the next few days, will have jQuery included in the package.
Michal,
Thanks for the great plugin but I agree with Samuel. I tried your recommended method – even explicitly setting everything as so:
Profile.photo.setOptions({show:false, disable:true, hide:true, enable:false});
But the original selection stuff still remains on the screen when I load a new image.
Thanks,
William