php 截图（可预览） crop images thumb jcrop/asido

天梯梦

浏览: 13756865 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Php / Pear / Mysql / Node.js

jcrop + asido

index.php

<?php
$targ_w = 90; // thumb width size
$targ_h = 89; // thumb height size

$filename = $_GET['file'];
if($filename)
{
    $abs = '/home/www';
    
    $fullsrc = '/public/images/'.$filename; // absolute path of original image uploaded
    $thumbsrc = '/public/images/thumb-'.$filename; // absolute path of thumb image you want 

    $fullroot = $abs.$fullsrc;
    $thumbroot = $abs.$thumbsrc;
    
    if ($_SERVER['REQUEST_METHOD'] == 'POST') 
    {
        include('asido/class.asido.php');
        asido::driver('gd');
        $i1 = asido::image($fullroot, $thumbroot);
        Asido::Crop($i1, $_POST['x'], $_POST['y'], $_POST['w'], $_POST['h']);
        $i1->save(ASIDO_OVERWRITE_ENABLED);

        // if you want to make resize via scale automatically, or you can remove it
        $i1 = asido::image($thumbroot, $thumbroot);
        Asido::resize($i1, $targ_w, $targ_h, ASIDO_RESIZE_STRETCH);
        $i1->save(ASIDO_OVERWRITE_ENABLED);
        
        exit('<img src="'.$thumbsrc.'" /><br><a href="?file='.$filename.'&sv='.time().'">Create Thumbnail Again</a>');
    }
?>
<!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">
<head>
<title>Add a New WithStars</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="GLS PHP Framework">
<meta name="author" content="GLS">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="Thu, 01 Jan 1970 00:00:01 GMT" />
<meta http-equiv="expires" content="0" />
<script type="text/javascript" src="js/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jcrop.js"></script>
<script>
jQuery(function($){
	// Create variables (in this scope) to hold the API and image size
	var jcrop_api, boundx, boundy;
  
	$('#cropbox').Jcrop({
		onChange: updatePreview,
		onSelect: updatePreview,
		aspectRatio: 1
	},function(){
		// Use the API to get the real image size
		var bounds = this.getBounds();
		boundx = bounds[0];
		boundy = bounds[1];
		// Store the API in the jcrop_api variable
		jcrop_api = this;
	});

	function updatePreview(c)
	{
		if (parseInt(c.w) > 0)
		{
			$('#x').val(c.x);
			$('#y').val(c.y);

			var rx = <?=$targ_w?> / c.w;
			var ry = <?=$targ_h?> / c.h;

			$('#w').val(c.w);
			$('#h').val(c.h);

			// if you don't want to preview, you can remove it
			$('#preview').css({
				width: Math.round(rx * boundx) + 'px',
				height: Math.round(ry * boundy) + 'px',
				marginLeft: '-' + Math.round(rx * c.x) + 'px',
				marginTop: '-' + Math.round(ry * c.y) + 'px'
			});
		}
	};

	function checkCoords()
	{
		if (parseInt($('#w').val())) return true;
		alert('Please select a crop region then press submit.');
		return false;
	};
});
</script>
<link href="css/jcrop.css" rel="stylesheet" type="text/css" />
<body>
    <form method="post" onsubmit="return checkCoords();">
        <table>
            <tr>
                <td><img src="<?=$fullsrc?>" id="cropbox" /></td>
                <td>
                    <h4>Preview pane:</h4>
                    <div style="overflow: hidden; width: <?=$targ_w?>px; height: <?=$targ_h?>px;border:#ccc 1px solid;padding:3px;"><img id="preview" src="<?=$fullsrc?>"/></div>
                    <div style="margin:5px;"><input type="submit" name="crop" value="Crop Image" /></div>
                </td>
            </tr>
        </table>
        <div style="margin:5px;">
			<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" />
        </div>
    </form>
</body>
</html>
<?php }?>

jcrop.css

.jcrop-holder { text-align: left; }

.jcrop-vline, .jcrop-hline
{
	font-size: 0;
	position: absolute;
	background: white url('jcrop.gif') top left repeat;
}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-handle {
	font-size: 1px;
	width: 7px !important;
	height: 7px !important;
	border: 1px #eee solid;
	background-color: #333;
	*width: 9px;
	*height: 9px;
}

.jcrop-tracker { width: 100%; height: 100%; }

.custom .jcrop-vline,
.custom .jcrop-hline
{
	background: yellow;
}
.custom .jcrop-handle
{
	border-color: black;
	background-color: #C7BB00;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

参考来源：

http://asido.info/

http://asido.info/about/features/

http://sourceforge.net/projects/asido/

http://deepliquid.com/content/Jcrop.html

http://code.google.com/p/jcrop/

转帖注明：justcoding http://justcoding.iteye.com/blog/1430913