Many people ask me for how they can send coordinates of cropped image to the server with help of MarqueeTool.
If you one of them or just want to see one of use of MarqueeTool, please see example below.
All you need is only select (crop) part of image below and click "sumbit" button.
Any comments from you will be very appreciated. Feel free to leave few lines of your thoughts or report bugs.
If you want to contact me by email please use contacts page.
For detailed information see documentation page.
Code used
<![CDATA[
<link rel="stylesheet" type="text/css" href="/css/marker.css" />
<script type="text/javascript" src="/js/prototype_reduced.js"></script>
<script type="text/javascript" src="/js/rectmarquee.js"></script>
<script type="text/javascript">
var MarqueeTool;
function onMarqueeUpdate() {
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);
</script>
...
<div style="position: relative;width:680px;margin:0 auto;" id="element_container">
<img src="/images/examples/example5.jpg" alt="" id="sampleid" />
</div>
<form name="coordsform" action="/crop.jpg" target="_blank" method="get">
<input type="hidden" name="x" value="0" id="coord_x" />
<input type="hidden" name="y" value="0" id="coord_y" />
<input type="hidden" name="w" value="0" id="coord_w" />
<input type="hidden" name="h" value="0" id="coord_h" />
<table border="0" cellpadding="0" cellspacing="0" id="coordinates" width="100%">
<tr>
<td width="20" nowrap="nowrap"> <strong>x:</strong></td><td width="50"> <span id="sample_x">0</span>px</td>
<td width="20" nowrap="nowrap"><strong>y:</strong></td><td width="50"> <span id="sample_y">0</span>px</td>
<td width="20" nowrap="nowrap"><strong>w:</strong></td><td width="50"> <span id="sample_w">0</span>px</td>
<td width="20" nowrap="nowrap"><strong>h:</strong></td><td width="50"> <span id="sample_h">0</span>px</td>
<td align="right" nowrap="nowrap"><input type="submit" value="Post Coordinates" /> </td>
</tr>
</table>
</form>
And on the server:
<?
header("Content-Type: image/jpeg");
$image = dirname(__FILE__) . "/images/examples/example5.jpg";
if ($w && $h)
{
$image_rs = @imagecreatefromjpeg($image);
$new_rs = @imagecreatetruecolor($w, $h);
@imagecopy ($new_rs, $image_rs, 0, 0, $x, $y, $w, $h);
@imagejpeg($new_rs);
}
readfile($image);
?>
]]>
"Users Comments"*
Leave your comment
An Xellent Tool! Gr8 Job!
But
var coords = MarqueeTool.getCoords();
Is causing page error for me, What would be the problem?
Plz Help!
Hi Jijo!
What is the scope of your variable MarqueeTool? It must be global if you want it to see/use in function
var MarqueeTool; // use this before all functions
Can you email me with sample of your code or link to your page?
Thanks for your interest to Marquee Tool!
Regards, Sergey
Hey, I am trying to get this to work on my site, but I just can't figure out how you got the thing to work with the code posted above. What is the point of the php code above? And why does the form post to crop.jpg, what is crop.jpg? I can't even get the marque tool to appear on the image. I'm confused, lol.
Regards,
Jordan
Hello Jordan!
Make sure what you did all right.
- marker.css, prototype.js, and rectmarquee.js must be included in html and javascript must be enabled!
- crop.jpg its a crop.php file what in .htaccess rewrited to crop.jpg (rtfm for mod_rewrite);
- code for crop.php showed above.
If you have any questions or want to show me link to your working/not working page - feel free to contact me.
Regards, Sergey
are you kidding me? this tool is awesome. Thanks for sharing such a good work
Hi, nice tool.
I was trying to understand it, but i copied the code, and all works good, but i don't know what happend with this line
new PreviewToolTip('element_container', {id: 'preview'});
if i leave it in the code, the page doesn't work, if i delete it, the page works, can you help me please?
Don't you have a full example ZIP?
Hello, you can not imagine what I wanted this!
But I can not select and crop the image.
You could send me email around the zip code?
Thanks!
This is a terrific tool! Is there a way to constrain the cropping to a specified proportion (e.g. 4/3 width to height aspect ratio)?
Amazing tool, thank you very much for being on "the good side" of free software.
Your work, among some other's who have helped me, have inspired me to keep everything I do as free, open and transparent as possible.
To create a preview you have to download 2 files : js/previewtt.js and js/src/scriptaculous.js (check source of this page) and paste this code:
This tutorial isn't good enough to create a preview.
But still, it's fantastic tool :)
Hello,
It is very good tool, but I couldn't run it in my browser, because I don't know from where to take marker.css, prototype.js, and rectmarquee.js.
Could you help me?
Regards,
Elle
Great tools. i must use it for my blogger
thanks again
Good night
I found very good the system that you developed, I would like to use.
I did everything, most of a mistake in the end, something with the function header ( "Content-Type: image / jpg"), and with readfile ($ image);
It seems that it is wrong the way for the folders,
If you can help me.
Sorry for my bad English
Thank you
This is very good script. But i think there should user press only enter button to crop image.
This looks fantastic. But i'm having a hard time making it function. If someone could just let me know if there is something else i'm missing that's really obvious, that would help SO MUCH!! And thanks for this script.
~javascript is enabled.
~js files uploaded into js folder on server
~picture uploaded in appropriate folder
~i have the following code included in my php file
---(in section)---
var MarqueeTool; function onMarqueeUpdate() { 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);
---(in section)---
x: 0px y: 0px w: 0px h: 0px
---(not sure where this should go. i assume whatever page the form loads to: /crop.jpg??)---
Turns out not all the code posted above...
But if someone could just briefly say what code goes where so that I know i'm not missing anything....gosh...you would help me SO much. I feel like i'm missing something obvious.
thanks!
hi,
thanks alot for such a good library, i really needed it..
however, there were issues in the above code with the following piece;
new PreviewToolTip('element_container', {id: 'preview'}); MarqueeTool = new Marquee('sampleid', { preview: 'preview', color: '#333', opacity: 0.75 });
i tried importing the previewtt.js as well but it wasn't still working.. so i just remove the first line and used the following code;
MarqueeTool = new Marquee('sampleid', { element_container: 'element_container', color: '#333', opacity: 0.75 });
MarqueeTool.setOnUpdateCallback(onMarqueeUpdate);
where "element_container" is the id of the div containing the image...
and now it works like a charm... thanks once again :)
regards,
Saad
I want image crop and rotate too. are you working on it???