Using with PHP and ImageMagick
56 views
Skip to first unread message
EvolvedWeb
Mar 4, 2009, 9:21:16 AM3/4/09
to javascript-image-cropper-ui
A little code to help others along, its meant to be used in the main
folder of the Cropper demo, but you'll still need to change a few php
vars yourself to make it work on your host (esp. the 'webroot' var):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Cropper PHP Demo - using with PHP and ImageMagick</title>
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="lib/scriptaculous.js?load=builder,dragdrop" type="text/
javascript"></script>
<script src="cropper.js" type="text/javascript"></script>
<link rel="stylesheet" media="all" href="cropper.css" type="text/
css" />
</head>
<body>
<?php
// set Root path to this file
define('webroot', '/home/yourwebnamehere/www/www/a/test/cropper/');
// Input image
$crop_in = 'tests/castle.jpg';
$crop_in_dir = webroot . 'in/';
// Ouput image
$crop_out = 'crop_tester.jpg';
$crop_out_dir = webroot . 'out/';
// Crop using ImageMagick
$doit = "convert -crop " . $width . "x" . $height . "+$x1+$y1 " .
$crop_in_dir . $crop_in . " +repage -strip " . $crop_out_dir .
$crop_out;
system($doit);
echo "cropped " . $width . "x" . $height . "+$x1+$y1 " .
$crop_in_dir . $crop_in . " +repage -strip " . $crop_out_dir .
$crop_out;
?>
OUT IMAGE:<img src="<? echo $crop_out; ?>" alt="crop out" /><br />
IN IMAGE:<img src="<? echo $crop_in; ?>" alt="Test image"
id="testImage" />
<form name="crop" action="">
<input type="submit" value="CROP IMAGE" /><br />
<input type="text" name="image" value="<? echo $crop_in; ?>" />
<label for="x1">x1:</label>
<input type="text" name="x1" id="x1" /><br />
<label for="y1">y1:</label>
<input type="text" name="y1" id="y1" /><br />
<label for="x2">x2:</label>
<input type="text" name="x2" id="x2" /><br />
<label for="y2">y2:</label>
<input type="text" name="y2" id="y2" /><br />
<label for="width">width:</label>
<input type="text" name="width" id="width" /><br />
<label for="height">height</label>
<input type="text" name="height" id="height" />
</form>
<script type="text/javascript" language="javascript">
function onEndCrop( coords, dimensions ) {
$( 'x1' ).value = coords.x1;
$( 'y1' ).value = coords.y1;
$( 'x2' ).value = coords.x2;
$( 'y2' ).value = coords.y2;
$( 'width' ).value = dimensions.width;
$( 'height' ).value = dimensions.height;
}
// example with minimum dimensions
Event.observe(
window,
'load',
function() {
new Cropper.Img(
'testImage',
{
minWidth: 200,
minHeight: 120,
displayOnInit: true,
onEndCrop: onEndCrop
}
)
}
);
</script>
</body>
</html>
If this give you any trouble, make sure the right permissions are set
on the folder you are trying to save the image to, it should be at
least 755.
folder of the Cropper demo, but you'll still need to change a few php
vars yourself to make it work on your host (esp. the 'webroot' var):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Cropper PHP Demo - using with PHP and ImageMagick</title>
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="lib/scriptaculous.js?load=builder,dragdrop" type="text/
javascript"></script>
<script src="cropper.js" type="text/javascript"></script>
<link rel="stylesheet" media="all" href="cropper.css" type="text/
css" />
</head>
<body>
<?php
// set Root path to this file
define('webroot', '/home/yourwebnamehere/www/www/a/test/cropper/');
// Input image
$crop_in = 'tests/castle.jpg';
$crop_in_dir = webroot . 'in/';
// Ouput image
$crop_out = 'crop_tester.jpg';
$crop_out_dir = webroot . 'out/';
// Crop using ImageMagick
$doit = "convert -crop " . $width . "x" . $height . "+$x1+$y1 " .
$crop_in_dir . $crop_in . " +repage -strip " . $crop_out_dir .
$crop_out;
system($doit);
echo "cropped " . $width . "x" . $height . "+$x1+$y1 " .
$crop_in_dir . $crop_in . " +repage -strip " . $crop_out_dir .
$crop_out;
?>
OUT IMAGE:<img src="<? echo $crop_out; ?>" alt="crop out" /><br />
IN IMAGE:<img src="<? echo $crop_in; ?>" alt="Test image"
id="testImage" />
<form name="crop" action="">
<input type="submit" value="CROP IMAGE" /><br />
<input type="text" name="image" value="<? echo $crop_in; ?>" />
<label for="x1">x1:</label>
<input type="text" name="x1" id="x1" /><br />
<label for="y1">y1:</label>
<input type="text" name="y1" id="y1" /><br />
<label for="x2">x2:</label>
<input type="text" name="x2" id="x2" /><br />
<label for="y2">y2:</label>
<input type="text" name="y2" id="y2" /><br />
<label for="width">width:</label>
<input type="text" name="width" id="width" /><br />
<label for="height">height</label>
<input type="text" name="height" id="height" />
</form>
<script type="text/javascript" language="javascript">
function onEndCrop( coords, dimensions ) {
$( 'x1' ).value = coords.x1;
$( 'y1' ).value = coords.y1;
$( 'x2' ).value = coords.x2;
$( 'y2' ).value = coords.y2;
$( 'width' ).value = dimensions.width;
$( 'height' ).value = dimensions.height;
}
// example with minimum dimensions
Event.observe(
window,
'load',
function() {
new Cropper.Img(
'testImage',
{
minWidth: 200,
minHeight: 120,
displayOnInit: true,
onEndCrop: onEndCrop
}
)
}
);
</script>
</body>
</html>
If this give you any trouble, make sure the right permissions are set
on the folder you are trying to save the image to, it should be at
least 755.
J Malinsky
Mar 4, 2009, 9:50:50 AM3/4/09
to javascript-im...@googlegroups.com
Hi, thanks for the helpful post.
To return the favor, I wanted to let you know that PHP has an extension called "imagick" that lets you control imagemagick from within PHP, and avoid system() calls: http://ca.php.net/imagick
The developer has a website filled with tips and tricks on how to use it: http://valokuva.org/
Best,
J
To return the favor, I wanted to let you know that PHP has an extension called "imagick" that lets you control imagemagick from within PHP, and avoid system() calls: http://ca.php.net/imagick
The developer has a website filled with tips and tricks on how to use it: http://valokuva.org/
Best,
J
EvolvedWeb
Mar 5, 2009, 7:23:11 AM3/5/09
to javascript-image-cropper-ui
Great, thanks J, I'll check it out. I found I was having some issues
with ImageMagick on my host until I tried using the System call...
Y
with ImageMagick on my host until I tried using the System call...
Y
Reply all
Reply to author
Forward
0 new messages