php - 如何使用网络摄像头捕获图像并将其附加到表单以进行提交

Question

我正在用 php 创建一个迷你生物识别应用程序。我希望能够将捕获图像附加到注册表单并将其保存到 mysql 数据库。我能够在线找到一些源代码来使用 webcam.js 捕获图像，但我需要将捕获的图像附加到表单以提交到数据库。

这是html源代码

<div align="center">
     <form method='post' id='emp-SaveForm' action="#" style="width:70%;">
     <div class="row">
     <div class="col-md-6">
     <!-- -->
    <div id="my_camera"></div>
    <!--<input type=button value="Configure" onClick="configure()" class="btn btn-warning">-->
    <input type=button value="Take Snapshot" onClick="take_snapshot()" class="btn btn-info">
    <input type=button value="Save Snapshot" onClick="saveSnap()" class="btn btn-success">
    </div>
     <div class="col-md-4">
    <div id="results"  ></div>
     </div>
     </div>
    <table class='table table-striped'>


        <tr>
            <td>Name</td>
            <td><input type='text' name='name' class='form-control' placeholder='EX : Surname Othernames' /></td>
        </tr>

        <tr>
            <td>D.o.B</td>
            <td><input type='text' name='dob' class='form-control datepicker' placeholder='' ></td>
        </tr>

        <tr>
            <td>Gender</td>
            <td>
            <select name="gender">
            <option value="">Select Gender</option>
            <option value="M">Male</option>
            <option value="F">Female</option>
            </select>
            </td>
        </tr>       
        <tr>
            <td>BVN</td>
            <td><input type='text' name='bvn' class='form-control' placeholder=''></td>
        </tr>

        <tr>
            <td>Business Name</td>
            <td><input type='text' name='business_name' class='form-control' placeholder=''></td>
        </tr>

        <tr>
            <td>Contact Address</td>
            <td><input type='text' name='contact_addr' class='form-control ' placeholder=''></td>
        </tr>

        <tr>
            <td>Town/City</td>
            <td><input type='text' name='Town_City' class='form-control' placeholder=''></td>
        </tr>

        <tr>
            <td>L.G.A</td>
            <td><input type='text' name='lga' class='form-control' placeholder=''></td>
        </tr>
        <tr>
            <td>State</td>
            <td>
            <select class="form-control" name="state">
                                        <option value="">-- Select State --</option>
                                        <option value="Abia" >Abia</option><option value="Abuja" >Abuja</option><option value="Adamawa" >Adamawa</option><option value="Akwa_ibom" >Akwa-ibom</option><option value="Anambra" >Anambra</option><option value="Bauchi" >Bauchi</option><option value="Bayelsa" >Bayelsa</option><option value="Benue" >Benue</option><option value="Borno" >Borno</option><option value="Cross_River" >Cross-River</option><option value="Delta" >Delta</option><option value="Ebonyi" >Ebonyi</option><option value="Edo" >Edo</option><option value="Ekiti" >Ekiti</option><option value="Enugu" >Enugu</option><option value="Gombe" >Gombe</option><option value="Imo" >Imo</option><option value="International" >International</option><option value="Jigawa" >Jigawa</option><option value="Kaduna" >Kaduna</option><option value="Kano" >Kano</option><option value="Kastina" >Kastina</option><option value="Kebbi" >Kebbi</option><option value="Kogi" >Kogi</option><option value="Kwara" >Kwara</option><option value="Lagos" >Lagos</option><option value="Nasarawa" >Nasarawa</option><option value="Niger" >Niger</option><option value="Ogun" >Ogun</option><option value="Ondo" >Ondo</option><option value="Osun" >Osun</option><option value="Oyo" >Oyo</option><option value="Plateau" >Plateau</option><option value="Rivers" >Rivers</option><option value="Sokoto" >Sokoto</option><option value="Taraba" >Taraba</option><option value="Yobe" >Yobe</option><option value="Zamfara" >Zamfara</option>                                    </select>

            </td>
        </tr>

        <tr>
            <td>Phone 1</td>
            <td><input type='text' name='phone_1' class='form-control' placeholder=''></td>
        </tr>

        <tr>
            <td>Phone 2</td>
            <td><input type='text' name='phone_2' class='form-control' placeholder=''></td>
        </tr>
        <tr>
            <td>Email Address</td>
            <td><input type='text' name='email' class='form-control' placeholder=''></td>
        </tr>
        <tr>
            <td>Products and Service Render</td>
            <td><input type='text' name='products_services_rendered' class='form-control' placeholder=''></td>
        </tr>
        <tr>
            <td>Sub Society Name</td>
            <td><input type='text' name='sub_society_name' class='form-control' placeholder=''></td>
        </tr>
        <tr>
            <td>Position</td>
            <td><input type='text' name='position' class='form-control' placeholder=''></td>
        </tr>
        <tr>
            <td>Next of kin Name</td>
            <td><input type='text' name='next_kin_name' class='form-control' placeholder=''></td>
        </tr>

        <tr>
            <td>Relationship</td>
            <td><input type='text' name='relationship' class='form-control' placeholder=''></td>
        </tr>

        <tr>
            <td>Phone of Next of Kin</td>
            <td><input type='text' name='phone_of_next_kin' class='form-control' placeholder=''></td>
        </tr>

        <tr>
            <td>Payment Status</td>
            <td>
            <select name="payment_status" class="from-control">
            <option value=""></option>
            <option value="Paid">Paid</option>
            <option value="Unpaid">Unpaid</option>
            </select>

            </td>
        </tr>


<tr>
            <td colspan="2">
            <input type="hidden" name="mem_id_no" value="" />
            <button type="submit" class="btn btn-primary" name="btn-save" id="btn-save">
            <span class="glyphicon glyphicon-plus"></span> Save Record
            </button>  
            </td>
        </tr>
    </table>
</form>

</div>  

用于提交表单的 php

<?php
require_once 'db/dbconfig.php';
require_once 'db/db_connect.php';


    if($_POST)
    {

        $query = "SELECT MAX(CAST(id as decimal))id from users";
            if($result = mysqli_query($conn, $query))
            {
                $rowy = mysqli_fetch_assoc($result);
                $count = $rowy['id'];
                $count = $count+1;
                $code_no = str_pad($count, 4, "0", STR_PAD_LEFT);
            }
            $str = substr(sha1(mt_rand() . microtime()), mt_rand(0,35), 3);

        $name = $_POST['name'];
      $dob = $_POST['dob'];
      $gen = $_POST['gender'];
     $bvn = $_POST['bvn'];
     $bn = $_POST['business_name'];
     $ca = $_POST['contact_addr'];
     $tc = $_POST['Town_City'];
      $lga = $_POST['lga'];
     $st = $_POST['state'];
     $p1 = $_POST['phone_1'];
      $p2 = $_POST['phone_2'];
      $email = $_POST['email'];
      $psr = $_POST['products_services_rendered'];
      $ssn = $_POST['sub_society_name'];
      $posi = $_POST['position'];
      $min = $str.$code_no;
      $nkn = $_POST['next_kin_name'];
      $rel = $_POST['relationship'];
      $ponk = $_POST['phone_of_next_kin'];
      $ps = $_POST['payment_status'];
      $pho = $_POST['photo'];
      $sig = $_POST['signature'];
     $dat = date("y:m:d H:m:i");

        try{

            $stmt = $db_con->prepare("INSERT INTO users(
          name,
          dob,
          gender,
          bvn,
          business_name,
          contact_addr,
          Town_City,
          lga,
          State,
          phone_1,
          phone_2,
          email,
          products_services_rendered,
          sub_society_name,
          position,
          mem_id_no,
          next_kin_name,
          relationship,
          phone_of_next_kin,
          payment_status,
          photo,
          signature,
          date_registered

            ) VALUES(:nam, :d, :gen, :bv,:bn,:ca,:tc,:lg,:st,:ph,:pha,:em,:psr,:ssn,:pos,:min,:nkn,:rel,:ponk,:ps,:ph,:sig,:dr)");
            $stmt->bindParam(":nam", $name);
            $stmt->bindParam(":d", $dob);
            $stmt->bindParam(":gen", $gen);
            $stmt->bindParam(":bv", $bvn);
            $stmt->bindParam(":bn", $bn);
            $stmt->bindParam(":ca", $ca);
            $stmt->bindParam(":tc", $tc);
            $stmt->bindParam(":lg", $lga);
            $stmt->bindParam(":st", $st);
            $stmt->bindParam(":ph", $p1);
            $stmt->bindParam(":pha", $p2);
            $stmt->bindParam(":em", $email);
            $stmt->bindParam(":psr", $psr);
            $stmt->bindParam(":ssn", $ssn);
            $stmt->bindParam(":pos", $posi);
            $stmt->bindParam(":min", $min);
            $stmt->bindParam(":nkn", $nkn);
            $stmt->bindParam(":rel", $rel);
            $stmt->bindParam(":ponk", $ponk);
            $stmt->bindParam(":ps", $ps);
            $stmt->bindParam(":ph", $pho);
            $stmt->bindParam(":sig", $sig);
            $stmt->bindParam(":dr", $dat);

            if($stmt->execute())
            {
                echo "Successfully Added";
            }
            else{
                echo "Query Problem";
            }   
        }
        catch(PDOException $e){
            echo $e->getMessage();
        }
    }

?>

用于捕获图像的 jquery

<script language="JavaScript">

        // Configure a few settings and attach camera
        function configure(){
            Webcam.set({
                width: 200,
                height: 150,
                image_format: 'jpeg',
                jpeg_quality: 90
            });
            Webcam.attach( '#my_camera' );
        }
        // A button for taking snaps


        // preload shutter audio clip
        var shutter = new Audio();
        shutter.autoplay = false;
        shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';

        function take_snapshot() {
            // play sound effect
            shutter.play();

            // take snapshot and get image data
            Webcam.snap( function(data_uri) {
                // display results in page
                document.getElementById('results').innerHTML = 
                    '<img id="imageprev" src="'+data_uri+'"/>';
            } );

            Webcam.reset();
        }

        function saveSnap(){
            // Get base64 value from <img id='imageprev'> source
            var base64image =  document.getElementById("imageprev").src;

             Webcam.upload( base64image, 'upload.php', function(code, text) {
                 console.log('Save successfully');
                 //console.log(text);
            });

        }
    </script>

将其移动到本地文件夹的 php 代码

<?php

// new filename
$filename = 'pic_'.date('YmdHis') . '.jpeg';

$url = '';
if( move_uploaded_file($_FILES['webcam']['tmp_name'],'upload/'.$filename) ){
    $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/upload/' . $filename;
}

// Return image url
echo $url;

Answer 1

这是我的代码，它的工作完美的html代码：

"> 拍照

javascript代码：Webcam.set（{宽度：300，高度：300，image_format：'jpeg'，jpeg_quality：90，force_flash：false}）；Webcam.attach('#my_camera');

function take_snapshot() {
    // take snapshot and get image data
    Webcam.snap(function (data_uri) {
        // display results in page

        document.getElementById('results').innerHTML =
            '<h3>Here is your image....</h3>' +
            '<img src="' +data_uri+ '" width=\'280px\' height=\'250px\'/>';
        Webcam.upload(data_uri, 'saveimages.php', function (code, text) {
                alert("Successfull");
        });
    });
    Webcam.reset();
}

php 代码：require_once 'core/init.php'；

$users_id = sanitize($_POST['users_id']);

$path = 'images/saved_images/webcam'.date('YmdHis').rand(383,1000).'.jpg';

move_uploaded_file($_FILES['webcam']['tmp_name'], $path);

$sql = "INSERT INTO trial(users_id,image) VALUES('$users_id','".$path."')";
$db->query($sql);

echo "<script>window.open('trailmodal.php','_self')</script>";