一、WebCam + PHP 拍攝並儲存照片

ajiang02發表於2020-08-01
WebPHP
系列文章：
一、WebCam + PHP 拍攝並儲存照片 二、Nginx 配置 https

下載 webcam.js 檔案

Html 頁面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webcam + php 拍攝並儲存圖片</title>
</head>
<body>

<div id="my_camera"></div>
<div id="my_result"></div>

<a href="javascript:void(take_snapshot())">點選拍照</a></br></br>

<!-- 新增圖片驗證碼功能 -->
<img src="captcha.php"></br>

<input type="text" id="captcha" name="captcha" placeholder="請輸入驗證碼"></br>
<input type="text" id="pre" name="pre" placeholder="請輸入儲存後的圖片的字首"></br>

<a href="javascript:void(upload())">點選上傳照片</a></br>

<!-- 引入 webcam.js 檔案 -->
<script src="webcam.js"></script>

<script language="JavaScript">

//設定鏡頭的大小
Webcam.set({
     width: 320,
     height: 240,
     image_format: 'jpeg',
     jpeg_quality: 90
}); 

Webcam.attach( '#my_camera' );

// 拍照
function take_snapshot() {
    Webcam.snap( function(data_uri) {
        // 點選拍照後，將照片放回頁面
        document.getElementById('my_result').innerHTML = '<img id="img_uri" src="'+data_uri+'"/>';
    });
}

// 上傳
function upload() {
    var img_uri = document.getElementById('img_uri').src;    // 圖片資訊
    var captcha = document.getElementById('captcha').value;  // 驗證碼
    var pre     = document.getElementById('pre').value;      // 圖片字首

    if (img_uri.length == 0) {
        alert("拍照失敗");
        return false;
    }
    if (captcha.length == 0) {
        alert("請輸入驗證碼");
        return false;
    }
    if (pre.length == 0) {
        alert("請輸入儲存後的圖片的字首");
        return false;
    }

    // 將引數一起傳給PHP
    Webcam.upload(img_uri, 'action.php?captcha='+captcha+"&pre="+pre, function(code, text) {
        alert(text);
        location.reload();
    });    
}
</script>
</body>
</html>

PHP 程式碼

<?php
session_start(); //必須處於程式頂部
// 驗證碼
$captcha      = trim($_GET['captcha']);
// 圖片字首
$pre          = trim($_GET['pre']);
// 儲存的圖片路徑
$picture_name = 'picture/' . $pre . "_" . time() . '.jpg';
// 儲存圖片
$result       = move_uploaded_file($_FILES['webcam']['tmp_name'], $picture_name);

if (strcasecmp($captcha, $_SESSION['captch_code']) !== 0) {
    echo "驗證碼錯誤";
    exit();
}
if (!$result) {
    echo "儲存圖片失敗";
    exit();
}

$url_raw = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI'])  . $picture_name;
$url = str_replace('\\', '/', $url_raw);
echo "上傳成功 \n" . "圖片路徑:" . $url;

php 生成驗證碼

<?php
session_start();//必須處於程式頂部

$width = 100;
$height = 30;
$image = imagecreatetruecolor($width,$height);    // 生成100*30的底圖
$black = imagecolorallocate($image,0,0,0);        // 黑色
$bgcolor = imagecolorallocate($image,255,255,255);// write
imagefill($image,0,0,$bgcolor);                   // 填充背景

$captch_code = "";//用於記錄驗證碼內容

//生成4位隨機驗證碼內容
for($i=0;$i<4;$i++){
    $fontsize = 6;
    $fontcolor = imagecolorallocate($image,rand(0,100),rand(0,100),rand(0,100));//驗證碼顏色深
    $data = 'abcdefghijkmnpqrstuvwxyABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';
    $fontcontent = substr($data,rand(0,strlen($data)-1),1);//從$data物件中隨機獲取一個字元
    $captch_code .= $fontcontent;
    $x = ($i*100/4)+rand(5,10);
    $y = rand(5,15);//設定驗證碼位置
    imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor);
}
$_SESSION['captch_code'] = $captch_code;

for($i<0;$i<200;$i++){
    //增加干擾點
    $pointcolor = imagecolorallocate($image,rand(50,200),rand(50,200),rand(50,200));//干擾點顏色淺
    imagesetpixel($image,rand(1,$width-1),rand(1,$height-1),$pointcolor);
}

for($i=0;$i<3;$i++){
    //增加干擾線
    $linecolor = imagecolorallocate($image,rand(100,200),rand(100,200),rand(100,200));//干擾線顏色更淺
    imageline($image,rand(1,$width-1),rand(1,$height-1),rand(1,$width-1),rand(1,$height-1),$linecolor);
}

header('Content-Type:image/png');
imagepng($image);     // 輸出影像
imagedestroy($image); // end銷燬圖片

效果

WebCam + PHP 拍攝並儲存照片

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章