Help with Jcrop

sciencebear · February 26, 2010

I am using a Javascript cropping tool called Jcrop. However, in order to save a picture I need to use the GD library. From what I understand, I already have this library (I am using Yahoo Small Business). The setup I am using right now returns a blank image no matter what. This is the code I am using:

<?php

/**
* Jcrop image cropping plugin for jQuery
* Example cropping script
* @copyright 2008 Kelly Hallman
* More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html
*/

if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$targ_w = $targ_h = 150;
$jpeg_quality = 90;

$src = 'demo_files/flowers.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);

// Comment out the header() call
// header('Content-type: image/jpeg');

imagejpeg($dst_r, $output_filename, $jpeg_quality);

exit;
}

// If not a POST request, display page below:

?><html>
<head>

	<script src="../js/jquery.min.js"></script>
	<script src="../js/jquery.Jcrop.js"></script>
	<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
	<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />

	<script language="Javascript">

		// Remember to invoke within jQuery(window).load(...)
		// If you don't, Jcrop may not initialize properly
		jQuery(window).load(function(){

			jQuery('#cropbox').Jcrop({
				onChange: showPreview,
				onSelect: showPreview,
				aspectRatio: 1
			});

		});

		// Our simple event handler, called from onChange and onSelect
		// event handlers, as per the Jcrop invocation above
		function showPreview(coords)
		{
			if (parseInt(coords.w) > 0)
			{
				var rx = 100 / coords.w;
				var ry = 100 / coords.h;

				jQuery('#preview').css({
					width: Math.round(rx * 500) + 'px',
					height: Math.round(ry * 370) + 'px',
					marginLeft: '-' + Math.round(rx * coords.x) + 'px',
					marginTop: '-' + Math.round(ry * coords.y) + 'px'
				});
			}
		}

	</script>

</head>

<body>

<div id="outer">
<div class="jcExample">
<div class="article">

	<h1>Jcrop - Aspect ratio lock w/ preview pane</h1>

	<!-- This is the image we're attaching Jcrop to -->
	<table>
	<tr>
	<td>
	<img src="demo_files/flowers.jpg" id="cropbox" />
	</td>
	<td>
	<div style="width:100px;height:100px;overflow:hidden;">
		<img src="demo_files/flowers.jpg" id="preview" />
	</div>

	</td>
	</tr>
	</table>

	<!-- This is the form that our event handler fills -->
	<form action="crop2.php" method="post" onsubmit="return checkCoords();">
		<input type="hidden" id="x" name="x" />
		<input type="hidden" id="y" name="y" />
		<input type="hidden" id="w" name="w" />
		<input type="hidden" id="h" name="h" />
		<input type="submit" value="Crop Image" />
	</form>

	<p>
		<b>An example with aspect ratio locking and preview pane.</b>
		Obviously the most visual demo, the preview pane is accomplished
		entirely outside of Jcrop with a simple jQuery-flavored callback.
		This type of interface could be useful for creating a thumbnail
		or avatar. The onChange event handler is used to update the
		view in the preview pane.
	</p>

	<div id="dl_links">
		<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
		<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
	</div>


</div>
</div>
</div>
</body>

</html>

I can post the js files as well, but they're rather lengthy. Any help?

Sign In

Help with Jcrop

Recommended Posts

sciencebear

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information