Proudly hosted with Dreamhost
Save $20 when signing up for Dreamhost by using the promo code amnuts20
If you find these scripts useful to you, appreciate the free support, or are just an all round nice person, then why not donate a little dosh to encourage me to continue? Every little helps!
|
Crop Canvas
This class allows you to crop an image in a variety of ways. You can crop in an absolute or relative way (to a certain size or by a certain size), both as a pixel number or a percentage. Or you can automatically crop based on a threshold limit.
Along with this class comes a web-based interface that you can use the drag and easily resize the area you'd like to crop, set various initial cropping sizes (such as 16:9 porportion, or 200x100 pixels), and more.
cropcanvas.zip
A zip file containing all the required files for the crop canvas class and interface to give you a quick and easy download option.
24.5kb in size
last modified Nov 29, 2006 at 6:38am
18128 downloads
class.cropcanvas.php
This is the main class file for the core cropping features.
If you use the crop interface then you will need this to process the image and for a number of variables/constants defined in this file.
18.06kb in size
last modified Jun 26, 2006 at 2:05am
16922 views, 13902 downloads
class.cropinterface.php
An extension to the crop canvas class which provides an interactive cropping area for an image. Very easy to use and implement.
16.46kb in size
last modified Nov 29, 2006 at 6:35am
10250 views, 10589 downloads
inc.cropinterface.php
Part of the crop interface class, this required file provides the actual HTML and Javascript for the interface itself.
The interface is based on div tags and CSS for complete flexability.
<?php
/**
* $Id: inc.cropinterface.php 49 2006-11-29 14:35:46Z Andrew $
*
* [Description]
*
* Required file for class.cropinterface.php.
*
* [Author]
*
* Andrew Collington <php@amnuts.com> <http://php.amnuts.com/>
*/
list($w, $h) = $this->calculateCropDimensions($this->crop['default']);
list($x, $y) = $this->calculateCropPosition($w, $h);
?>
<!--
Styles for the interface.
Don't change any of the php code segments or #theCrop, unless you know
what you are doing. Feel free to change the rest if you so desire.
-->
<style type="text/css">
#cropInterface {
border: 1px solid black;
padding: 0;
margin: 0;
text-align: center;
background-color: #fff;
color: #000;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: <?php echo $this->getImageWidth(); ?>px;
}
#cropDetails {
margin: 5px;
padding: 0;
}
#cropResize, #cropResize p {
margin: 5px;
padding: 0;
font-size: 11px;
display: <?php echo ($this->crop['change'] && $this->crop['resize']) ? 'inherit' : 'none'; ?>;
}
#cropSizes {
margin: 5px;
padding: 0;
font-size: 11px;
display: <?php echo (!empty($this->crop['sizes']) && $this->crop['resize']) ? 'inherit' : 'none'; ?>;
}
#cropImage {
border-top: 1px solid black;
border-bottom: 1px solid black;
margin: 0;
padding: 0;
}
#cropSubmitButton {
font-size: 10px;
font-family: "MS Sans Serif", Geneva, sans-serif;
background-color: #D4D0C8;
border: 0;
margin: 0;
padding: 5px;
width: 100%;
}
#theCrop {
position: absolute;
background-color: transparent;
border: 1px solid yellow;
background-image: url(<?php echo $this->getImageSource(); ?>);
background-repeat: no-repeat;
padding: 0;
margin: 0;
}
#cropImage, #theImage {
width: <?php echo $this->getImageWidth(); ?>px;
height: <?php echo $this->getImageHeight(); ?>px;
}
/* box model hack stuff */
#theCrop {
width: <?php echo $w; ?>px;
font-family: "\"}\"";
font-family:inherit;
width:<?php echo ($w - 2); ?>px;
}
#theCrop {
height: <?php echo $h; ?>px;
font-family: "\"}\"";
font-family:inherit;
height:<?php echo ($h - 2); ?>px;
}
html>body #theCrop {
width:<?php echo ($w - 2); ?>px;
height:<?php echo ($h - 2); ?>px;
}
</style>
<!--
The main interface.
You must not rename the ids because things may break!
-->
<div id="theCrop"></div>
<div id="cropInterface">
<div id="cropDetails">
<strong><?php echo basename($this->file); ?> (<?php echo $this->img['sizes'][0]; ?> x <?php echo $this->img['sizes'][1]; ?>)</strong>
<div id="cropDimensions"> </div>
</div>
<div id="cropImage"><img src="<?php echo $this->getImageSource(); ?>" alt="image" title="crop this image" name="theImage" id="theImage" /></div>
<div id="cropResize">
<p>Hold down 'shift' or 'control' while dragging to resize cropping area</p>
<input type="radio" id="cropResizeAny" name="resize" onClick="cc_SetResizingType(0);"<?php if ($this->crop['type'] == ccRESIZEANY) { echo ' checked="checked"'; } ?> /> <label for="cropResizeAny">Any Dimensions</label> <input type="radio" name="resize" id="cropResizeProp" onClick="cc_SetResizingType(1);"<?php if ($this->crop['type'] == ccRESIZEPROP) { echo ' checked="checked"'; } ?> /> <label for="cropResizeProp">Proportional</label>
</div>
<div id="cropSizes">
<select id="setSize" name="setSize" onchange="cc_setSize();">
<option value="-1">Select a cropping size</option>
<?php
if (!empty($this->crop['sizes'])) {
foreach ($this->crop['sizes'] as $size => $desc) {
echo '<option value="', $size, '">', $desc, '</option>';
}
}
?>
</select>
</div>
<div id="cropSubmit">
<input type="submit" value="crop the image" id="cropSubmitButton" onClick="cc_Submit();" />
</div>
</div>
<!--
Main javascript routines.
Changing things here may break functionality, so don't tweak unless you
know what you are doing.
-->
<script type="text/javascript" src="wz_dragdrop.js"></script>
<script type="text/javascript">
function my_DragFunc()
{
dd.elements.theCrop.maxoffr = dd.elements.theImage.w - dd.elements.theCrop.w;
dd.elements.theCrop.maxoffb = dd.elements.theImage.h - dd.elements.theCrop.h;
dd.elements.theCrop.maxw = <?php echo $this->getImageWidth(); ?>;
dd.elements.theCrop.maxh = <?php echo $this->getImageHeight(); ?>;
cc_showCropSize();
cc_reposBackground();
}
function my_ResizeFunc()
{
dd.elements.theCrop.maxw = (dd.elements.theImage.w + dd.elements.theImage.x) - dd.elements.theCrop.x;
dd.elements.theCrop.maxh = (dd.elements.theImage.h + dd.elements.theImage.y) - dd.elements.theCrop.y;
cc_showCropSize();
cc_reposBackground();
}
function cc_Submit()
{
self.location.href = '<?php echo $_SERVER['PHP_SELF']; ?>?file=<?php echo $this->file; ?>&sx=' +
Math.round((dd.elements.theCrop.x - dd.elements.theImage.x)<?php echo ($this->getRatio()) ? ' * ' . $this->getRatio() : ''; ?>) + '&sy=' +
Math.round((dd.elements.theCrop.y - dd.elements.theImage.y)<?php echo ($this->getRatio()) ? ' * ' . $this->getRatio() : ''; ?>) + '&ex=' +
Math.round(((dd.elements.theCrop.x - dd.elements.theImage.x) + dd.elements.theCrop.w)<?php echo ($this->getRatio()) ? ' * ' . $this->getRatio() : ''; ?>) + '&ey=' +
Math.round(((dd.elements.theCrop.y - dd.elements.theImage.y) + dd.elements.theCrop.h)<?php echo ($this->getRatio()) ? ' * ' . $this->getRatio() : ''; ?>) +
'<?php echo $this->params['str']; ?>';
}
function cc_SetResizingType(proportional)
{
if (proportional) {
dd.elements.theCrop.defw = dd.elements.theCrop.w;
dd.elements.theCrop.defh = dd.elements.theCrop.h;
dd.elements.theCrop.scalable = 1;
dd.elements.theCrop.resizable = 0;
} else {
dd.elements.theCrop.scalable = 0;
dd.elements.theCrop.resizable = 1;
}
}
function cc_reposBackground()
{
xPos = (dd.elements.theCrop.x - dd.elements.theImage.x + 1);
yPos = (dd.elements.theCrop.y - dd.elements.theImage.y + 1);
if (document.getElementById) {
document.getElementById('theCrop').style.backgroundPosition = '-' + xPos + 'px -' + yPos + 'px';
} else if (document.all) {
document.all['theCrop'].style.backgroundPosition = '-' + xPos + 'px -' + yPos + 'px';
} else {
document.layers['theCrop'].backgroundPosition = '-' + xPos + 'px -' + yPos + 'px';
}
}
function cc_showCropSize()
{
dd.elements.cropDimensions.write('Crop size: ' + dd.elements.theCrop.w + ' / ' + dd.elements.theCrop.h);
}
function cc_setSize()
{
element = document.getElementById('setSize');
switch(element.value) {
<?php
$str = "case '%s':
cc_setCropDimensions(%d, %d);
dd.elements.theCrop.moveTo(dd.elements.theImage.x + %d, dd.elements.theImage.y + %d);
cc_reposBackground();
break\n";
if ($this->crop['sizes']) {
foreach ($this->crop['sizes'] as $s => $d) {
list($w, $h) = $this->calculateCropDimensions($s);
list($x, $y) = $this->calculateCropPosition($w, $h);
printf($str, $s, $w, $h, $x, $y);
}
}
?>
}
cc_showCropSize();
}
function cc_setCropDimensions(w, h)
{
dd.elements.theCrop.moveTo(dd.elements.theImage.x, dd.elements.theImage.y);
dd.elements.theCrop.resizeTo(w, h);
dd.elements.theCrop.defw = w;
dd.elements.theCrop.defh = h;
cc_reposBackground();
}
</script>
8.21kb in size
last modified Nov 29, 2006 at 6:35am
5778 views, 4918 downloads
inc.cropjavascript.php
Part of the crop interface class, this required file provides the initiation of the javascript elements and must be called at the end of your HTML, just before the closing body tag.
1.34kb in size
last modified Nov 29, 2006 at 6:35am
4852 views, 4571 downloads
inc.cropimage.php
Part of the crop interface class, this required file provides a gateway to create a dynamically resized image.
713b in size
last modified Nov 29, 2006 at 6:35am
6513 views, 4776 downloads
test.cropcanvas.php
796b in size
last modified Jun 26, 2006 at 2:05am
11354 views, 10759 downloads
test.cropinterface.php
1.33kb in size
last modified Nov 29, 2006 at 6:35am
8135 views, 9631 downloads
wz_dragdrop.js
38.45kb in size
last modified May 4, 2006 at 2:41pm
9592 downloads
transparentpixel.gif
Provided as part of the wz_dragdrop.js library to provide backwards compatability for older browsers.
43b in size
last modified Jan 14, 2006 at 12:47pm
6670 views, 9506 downloads
|
