[轉] 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 表單元素 。