Rectangular Marquee Tool

Hi, Excellent piece of coding!

When are you planning the release of the new version? I'm particularly interested in the ability to manage several marquees on the same picture. This would be very handy for my next project (extracting individual articles from a newspaper).

Kind regards,

Geert

Sergey,
This looks very good indeed. I can't see how I can save the highlighted thumbnail image to the server? Is there an ASP example code you can point me to so I can do this please?
Thanks
Marcus

Hello Sergey,

i would like to use your script in our KNX@Home application, do you have (beside the MIT-License) any requests i have to fulfill to use your software?

By the way: its a great script, and we will use it to draw clickable areas!

Regards
Johannes

hi, nice piece of code - somehow the select(id) doesn't work as espected , e.g.

function myselect(id){
RectMarquee.select(id);
}

never jumps into the
if (this.activeId !== id && this.items.length > 1) {...select the thing...}
block - haven't debugged but you know how to fix this?

greets and keep up the good work!

Aart Jan, sorry for yersterday broken download link and thanks for reminding. I've fixed this problem.

Thanks for your notice, Michel!

Unfortunately its impossible now to handle clicks on images. But I'll add method for setting handler. I'll email you about updates.

Regards, Sergey

Hi, Geert Van Huychem!

It seems what Simon and you are trying to use the same id as for image.
When you've created marquee object you can get id with following code

var rmt = new MarqueeTool('myimageid');
var firstid = rmt.getId();
// add other marquee
rmt.add('secondimageid');
var secondid = rmt.getId();

Then you can use select marquee by code

rmt.select(firstid);
// some actions here ...
rmt.select(secondid);


May be this is small inconvenience to use other ids for image and objectid, I'll try to fix it in next release.

Also see first example on
http://www.marqueetool.net/examples/common-use-of-dhtml-marquee-tool/
and try to create several marquees by hotkeys ('Shift + N');
then try to select marquee also with hotkey ('S');
All working well.
I've not completed to write documentation, may be here is problem. I'll do my best to have documentation completed by the end of month. Also come back to this site in around 1-2 weeks, I'll prepare good example with several marquees.

Thanks too all of you for your interest and help.

Regards, Sergey.
P.S. If you have any questions or want to show me your adaptation (or problem with adaptation) of MarqueeTool, please ask.

setOnUpdateCallback(callback) doesn't seem to function as documented.

First, it says "Set callback function for event when dragging is finished", but clearly it is called repeatedly _while_ an edge is dragged, not when finished. It would be nice to have a callback that is actually invoked only when the drag finishes - or at least a way to know the drag is finished when you're in this callback.

Secondly, it doesn't seem to be passing x,y,w,h (at least in Firefox), and your example page doesn't use those arguments, either.

Uh... I would also like to have a min width, max width, min height and max height of the marquee.

I should work so that the marquee can not be resized to smaller than min and greater than max.

That would be a really nice feature.

Thanks again.

Amazing tool!
I'll use it for my new project

Thanks!

Hi guys!
I'm not able to run the crop tool.
The coordinates doesn't appear on the x,y,w,h points.
The message "PreviewToolTip is not defined" appears.
The message "Marqueetool is not defined" appears.
So, the crop doesn't work.
Could you help me?

var MarqueeTool;
function onMarqueeUpdate(){
alert("teste");
var coords = MarqueeTool.getCoords();
$('sample_x').innerHTML = $('coord_x').value = coords.x1;
$('sample_y').innerHTML = $('coord_y').value = coords.y1;
$('sample_w').innerHTML = $('coord_w').value = coords.width;
$('sample_h').innerHTML = $('coord_h').value = coords.height;
}
function onWindowLoad(){
new PreviewToolTip('element_container', {
id: 'preview'});
MarqueeTool = new Marquee('sampleid',{
preview: 'preview',
color: '#333',
opacity: 0.75 });

MarqueeTool.setOnUpdateCallback(onMarqueeUpdate);
}
Event.observe(window, 'load', onWindowLoad);
var RectMarquee;
function initLoad(){
RectMarquee = new Marquee('sampleid', {color: '#F60', opacity: 0.45});
}
var coords = Marqueetool.getCoords();
// coords.leftTop - left top corner
// coords.rightBottom - right bottom corner

new Ajax.Request(server_url, {parameters: 'x=' + coords.x1 + '&y=' + coords.y1 + '&width=' + coords.width + '&height=' + coodrs.height, onComplete: onSendCoordsComplete});

// coords.dims - dimensions
var square = coords.dims[0] * coords.dims[1];

x: 0px
y: 0px
w: 0px
h: 0px

Hi Ilya and Carlos!

I don’t thought my script to use my preview tool object for other people but now I think it need to open this code too.
You need just follow these steps:

1) Make sure what you've included javascripts in your html
prototype.js, scriptaculous.js, effects.js, previewtt.js

2) Include these lines in your css file
.previewPimp {
position: absolute;
font-size: 1px;
line-height: 1px;
height: 16px;
width: 16px;
overflow: hidden;
right: 5px;
bottom: 6px;
border: 3px solid #fff;
background: url(/images/preview_pimp.gif) no-repeat top #fff;
z-index: 1001;
cursor: pointer;
}

.previewWindow {
font-size: 1px;
line-height: 1px;
position: absolute;
right: 5px;
bottom: 6px;
z-index: 1000;
border: 3px solid #fff;
background: url(/images/preview.gif) no-repeat center #333;
}

Copy images http://marqueetool.net/images/preview_pimp.gif and
http://marqueetool.net/images/preview.gif to your folder

3) In html where you have image to crop use following html
<div style="position: relative;width:510px;margin:0 auto;" id="element_container"><img src="/images/examples/image2.jpg" alt="" id="sampleid" /></div>

Where position: relative is important.

4) Use my code for generating preview tool
new PreviewToolTip('element_container', {id: 'preview'});
and then

5) Use code to create marquee
new Marquee('sampleid', {
preview: 'preview',
color: '#333',
opacity: 0.45,
coords: {x1: 63, y1: 98, width: 223, height: 235}
});

6) Link to our site if you can! ;)
<a href="http://marqueetool.net">Marquee Tool - Javascript Image Cropper</a>


Best regards,
Sergey K.
http://marqueetool.net

I'm preparing a new version on JQuery. If anybody interested - welcome back in a few weeks!

Regards,
Sergey

Talented Guy,Once i used for a template Slicing.

Thanks