[转] PHP开发通用型标题图片功能

WordPress 、 DedeCMS 等知名的网站内容管理系统（CMS）发布内容时都支持缩略图，基本操做就是在数据表中设计一个 thumb 字段用于保存缩略图的地址，今天说说如何设计出后台通用的标题图片（缩略图）功能 。

网站前台缩略图的展现没什么好说的，作个简单的 if (thumb) { ... } 就 OK  了 。

首先在数据库设计的时候记得新建一个 thumb 字段，这是必须的基本操做 。

好比【爱玩电脑】网站中“电脑技术”和“硬件导购”栏目都使用到了标题图片功能，因此必须开发成通用型功能，如今咱们把接口文件定为 admin/thumb.php 。

在内容的发布页咱们使用 iframe 框架到 thumb.php ， 并提供“使用网络图片地址”和“上传本地图片”两种方法 ， 以下图所示 ：

咱们可创建一个隐藏的 DIV 容器并将 iframe 框架放在里面，好比
<div class="hide" id="thumbBox"><iframe src="thumb.php"></iframe></div>

在调用该框架页面 thumb.php 时，应在父页面中设置好表单元素 。

图片中能够看到 name="thumbInput" 的隐藏表单元素，它的做用就是将图片地址跟着表单数据一块儿提交至服务器处理程序中，好比 contnet.php?action=add_post  。

到这里咱们不由要问 iframe 中上传的图片地址如何同步 thumbInput 值呢？其实到这里咱们还只是解决了标题图片的地址问题，若是图片尺寸、形状、大小不合适呢？ 因此咱们还须要进行剪切，剪切好了再同步 thumbInput 值 。

标题图片 Thumb 的剪切

标题图片地址调用成功后，须要进行剪切调整大小、形状，我使用一款名为 jcrop 的 jQuery 插件，你们能够经过百度获取，或者戳这里下载 jcrop 插件  。

jcrop 功能仍是很强大的，关键是兼容性挺不错，具体你们能够查看说明，给个图片你们预览预览 ，官方给出的演示比较全面，建议你们那看效果和文档 。

上传完成（or 调用图片地址）后咱们将页面跳转到 thumb.php?action=croper 剪切页面，在调用缩略图接口页面 thumb.php 时咱们带上 channel 参数例如 thumb.php?channel=daogou ，并将这个 channel 参数传递下去，在剪切时提供不一样的剪切模板以保存不一样尺寸的标题图片 。

尼玛网速太慢，这两图片上传半天，差点超时 先保存一下  ！

咱们接着说标题图片的剪切和 jcrop 的使用，看代码截图 ：

网速太快，图片已上天 ...

 

<div class="container" role="main">
	<div class="row">
		<form id="cropForm">
			<input type="hidden" name="isUpload" value="1" />

			<input type="hidden" name="x" id="x" value="0" />
			<input type="hidden" name="y" id="y" value="0" />
			<input type="hidden" name="w" id="w" value="0" />
			<input type="hidden" name="h" id="h" value="0" />

			<input type="hidden" name="tw" value="230">
			<input type="hidden" name="th" value="230">

			<input type="hidden" name="img" id="img" value="<?php echo $data['url']; ?>" />
			<button type="button" id="btnCrop" class="btn btn-primary" onclick="crop()">剪裁图片</button>
			<button type="button" id="btnSkipCrop" class="btn btn-default" onclick="skip_crop()">跳过剪裁</button>
		</form>
	</div>

	<div class="row" style="height: 30px">&nbsp;</div>

	<div class="row">
		<img id="element_id" src="<?php echo $data['url']; ?>">
	</div>

</div>

仍是直接贴代码吧，接着看下面

 

 

<script>
var SI = $('#element_id') // 源图片
var TI = $('#thumbImg', window.parent.document) // 父框架中的预览图

$('#element_id').Jcrop({
	onSelect: updateCoords,
	minSize: [100, 100],
	aspectRatio: 1 / 1,
	boxWidth: 580,
	boxHeight: 300
})

function updateCoords(c){
	$('#x').val(c.x)
	$('#y').val(c.y)
	$('#w').val(c.w)
	$('#h').val(c.h)

	var rx = 100 / c.w
	var ry = 100 / c.h

	var sw = SI.width()
	var sh = SI.height()

	TI.attr('src', '<?php echo $data['url']; ?>')
	TI.css({
		width: Math.round(rx * sw) + 'px',
		height: Math.round(ry * sh) + 'px',
		marginLeft: '-' + Math.round(rx * c.x) + 'px',
		marginTop: '-' + Math.round(ry * c.y) + 'px'
	})
}

function crop(){
	$.ajax({
		//dataType : 'json',
		dataType : 'html',
		type : 'post',
		url : '<?php echo SYS_DIR . PRIVATE_DIR; ?>/thumb.php?action=crop_post',
		data : $('#cropForm').serialize(),
		error : function(){
			alert('AJAX 请求错误')
		},
		beforeSend : function(){
			$('#btnCrop').button('loading')
		},
		success : function(data){
			alert(data)
			if (data.error==1){
				alert(data.message)
			} else {
				$('#thumbInput', window.parent.document).val(data.message)
				$('#myModal', window.parent.document).hide()
				$('#thumbIframe', window.parent.document).attr('src', '<?php echo SYS_DIR . PRIVATE_DIR; ?>/thumb.php?action=upload')
			}
		},
		complete : function(){
			$('#btnCrop').button('reset')
		}
	})
}

function skip_crop(){
	$.ajax({
		dataType : 'json',
		type : 'post',
		url : '<?php echo SYS_DIR . PRIVATE_DIR; ?>/thumb.php?action=skip_crop',
		data : $('#cropForm').serialize(),
		error : function(){
			alert('AJAX 请求错误')
		},
		beforeSend : function(){
			$('#btnSkipCrop').button('loading')
		},
		success : function(data){
			if (data.error==1){
				alert(data.message)
			} else {
				TI.attr('src', data.message)
				$('#thumbInput', window.parent.document).val(data.message)
				$('#myModal', window.parent.document).hide()
				$('#thumbIframe', window.parent.document).attr('src', '<?php echo SYS_DIR . PRIVATE_DIR; ?>/thumb.php')
			}
		},
		complete : function(){
			$('#btnSkipCrop').button('reset')
		}
	})
}
</script>

javascript 部分，主要提供标题图片的预览、表单数据的更新、还有个跳过剪切的功能 。

其中标题图片的预览是在父页面的这个位置 ， 固然这是我随便截取的一张图片 。

当数据提交至 thumb.php?action=crop_post 后，接着看下面的处理 ...

 

case 'crop_post':
	$x = post('x', 1);
	$y = post('y', 1);
	$w = post('w', 1);
	$h = post('h', 1);
	$img = post('img');
	$isUpload = post('isUpload');

	$tw = post('tw', 1);
	$th = post('th');

	if (!filter_var($img, FILTER_VALIDATE_URL))
	{
		echo json_encode(array(error=>1, message=>'图片地址错误'));
		exit();
	}

	if ($w < 50 || $h < 50)
	{
		echo json_encode(array(error=>1, message=>'选区尺寸过小请从新选择'));
		exit();
	}

	if (!$tw || !$th)
	{
		echo json_encode(array(error=>1, message=>'图片存储尺寸获取失败'));
		exit();
	}

	# image.class.php 依赖 imageIck
	$image = loader('image'); 
	$image->open($img); # 打开图片
	$image->crop($x, $y, $w, $h, $tw, $th); # x一、y一、选区宽度、选区高度、存储宽度、存储高度

	$path = $image->save(); # sae/tmp_45089/13534.gif

	if (!$path)
	{
		echo json_encode(array(error=>1, message=>'保存图片错误 SAE_TMP_PATH'));
		exit();
	}

	$attached = loader('attached');
	$attached->channel = 'thumb';
	
	$array = $attached->write(true, $path); # write(is_path, $data or path, $new_path)

	//若是$img存在删除冗余图片
	if ($isUpload)
	{
		$path = str_replace(ATTACHED_HOST . '/', '', $img);
		$attached->delete($path);
	}
	
	echo json_encode($array);
	break;

@hange 代码写得丑，你们不要见笑 ， 像我这种业余选手代码能跑起来就差很少了 。

 

主要就是获取图片中选区的起始位置，选区大小，目标图片大小等参数，生成并保存图片后就能够把新图片的地址同步至父页面中的 thumbInput 表单元素 。