我們在一些(xiē)WEB應用中可(kě)能會(huì)遇到這樣的情況，用戶需要自己現場(chǎng)拍照并上(shàng)傳到會(huì)員系統。比如駕校(xiào)采集指紋拍照流程、考試現場(chǎng)采集照片等。我們今天要講的是如何使用javascript和(hé)PHP實現一個(gè)簡單的在線拍照并上(shàng)傳的功能。

實現這個(gè)功能的前提是你(nǐ)的電(diàn)腦(nǎo)設備上(shàng)需要安裝有(yǒu)攝像頭設備，以及你(nǐ)的浏覽器(qì)需要支持flash。

HTML

Javascript+PHP實現在線拍照功能

	



	

在body中加入一個(gè)用于調用攝像組件的容器(qì)id#cam和(hé)一個(gè)顯示上(shàng)傳信息的容器(qì)id#results。

Javascript

接下來(lái)調用攝像組件，我們先載入webcam.js，用于拍照和(hé)上(shàng)傳的js庫。

然後在容器(qì)id#cam中，加入以下代碼：

我們調用了webcam，其中webcam.set_api_url用來(lái)設置圖像上(shàng)傳交互的php路徑，set_quality可(kě)設置圖像質量，set_shutter_sound設置聲音(yīn)，get_html輸出攝像組件，參數(shù)即寬度、高(gāo)度、上(shàng)傳後寬度、上(shàng)傳後高(gāo)度。

當點擊按鈕拍照時(shí)，需要執行(xíng)以下代碼：

當執行(xíng)拍照動作(zuò)時(shí)，代碼與後台php交互，如果上(shàng)傳圖片完成後，則返回相應的信息。

PHP

action.php所做(zuò)的就是将本地拍照的圖像上(shàng)傳到服務器(qì)，并将圖片路徑返回給前端。注意存放圖片的路徑要給寫權限。

$filename = date('YmdHis') . '.jpg';
$result = file_put_contents( 'pics/'.$filename, file_get_contents('php://input') );
if (!$result) {
	print "ERROR: Failed to write data to $filename, check permissions\n";
	exit();
}

$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/pics/' . $filename;
print "$url\n";

本文隻是簡單的介紹了下在線拍照和(hé)上(shàng)傳功能，其實深入應用場(chǎng)景如上(shàng)傳後再裁剪，生(shēng)成多(duō)張不同比例的圖像等等，大(dà)家(jiā)自己去琢磨吧(ba)。