如何在 php codeigniter 中保存 webcap 中的 snap - PHP (1)

📌 相关文章

📜 如何在 php codeigniter 中保存 webcap 中的 snap - PHP (1)

📅 最后修改于: 2023-12-03 15:38:22.598000 🧑 作者: Mango

如何在 PHP CodeIgniter 中保存 Webcam 中的 Snap

简介

本文将介绍如何在 PHP CodeIgniter 框架中使用 Webcam 库来保存 Webcam 中的快照。

前提条件

在开始本文之前，你需要确保已经安装了 PHP CodeIgniter 框架和 Webcam 库。如果你还没有安装，你可以参考以下链接。

PHP CodeIgniter 框架：https://www.codeigniter.com/

Webcam 库：https://github.com/jhuckaby/webcamjs/

步骤

步骤 1：创建一个 CodeIgniter 控制器

在第一步中，我们将创建一个 CodeIgniter 控制器来管理我们的 Webcam 快照的保存。

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Webcam extends CI_Controller {

    public function index()
    {
        $this->load->view('webcam_view');
    }

    public function save_snap()
    {
        // Code to save snap
    }

}

在这个控制器中，我们有两个方法。第一个方法是 index() 方法，它加载了我们的视图文件 webcam_view，该视图文件将包含我们的 Webcam 快照。第二个方法是 save_snap() 方法，该方法将用于保存我们的 Webcam 快照。

步骤 2：创建视图文件

在第二步中，我们将创建一个视图文件，该文件将包含我们的 Webcam 快照并将允许用户保存它。

<!DOCTYPE html>
<html>
<head>
    <title>Webcam Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>

    <script language="JavaScript">
        Webcam.set({
            width: 320,
            height: 240,
            dest_width: 640,
            dest_height: 480,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach('#my_camera');
    </script>
</head>
<body>
    <h1>Webcam Test</h1>
    <div id="my_camera"></div>
    <br/>
    <input type="button" value="Take Snapshot" onClick="take_snapshot()">
    <br/><br/>
    <div id="result"></div>

    <script language="JavaScript">
        function take_snapshot() {
            Webcam.snap(function(data_uri) {
                document.getElementById('result').innerHTML = '<img src="'+data_uri+'"/>';
                save_image(data_uri);
            });
        }

        function save_image(image) {
            $.post("<?php echo site_url('webcam/save_snap'); ?>", {image: image}, function(result){
                console.log(result);
            });
        }
    </script>
</body>
</html>

在该视图文件中，我们使用了 Webcam 库来捕捉我们的 Webcam 快照，并使用 JavaScript 将其显示在页面上。我们还为用户提供了一个按钮，当用户单击这个按钮时，我们将保存他们的 Webcam 快照。

步骤 3：保存快照

在第三步中，我们将使用之前创建的 save_snap() 方法来保存我们的 Webcam 快照。

public function save_snap()
{
    $data_uri = $this->input->post('image');

    $data = substr($data_uri, strpos($data_uri, ",") + 1);
    $decoded_data = base64_decode($data);

    $file_name = "snap_".time().".jpg";
    $file_path = "./snapshots/".$file_name;

    file_put_contents($file_path, $decoded_data);

    echo "Snap saved successfully!";
}

在该方法中，我们获取通过 POST 请求获取 user 的 Webcam 快照，并将其解码为 base64 编码的二进制数据。然后，我们使用 file_put_contents() 函数将其保存在文件系统中。

结论

现在，我们已经了解了如何在 PHP CodeIgniter 中使用 Webcam 库来保存 Webcam 快照。这是一个非常有用的功能，可以帮助我们为网站添加更多的用户互动性。请记住，在使用 Webcam 库时要小心，并确保仅限于合法的用途。