分类 Html 下的文章

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>摄像头拍照上传</title>
</head>

<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<video id="video" width="480" height="320" controls>
</video>
<div>
    <button id="capture">拍照</button>
</div>
<canvas id="canvas" width="480" height="320"></canvas>
<script>

    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints, success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    }

    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');

    function success(stream) {
        //兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        console.log(stream);

        //video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    }

    function error(error) {
        console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator
        .mozGetUserMedia) {
        //调用用户媒体设备, 访问摄像头
        getUserMedia({
            video: {
                width: 480,
                height: 320
            }
        }, success, error);
    } else {
        alert('不支持访问用户媒体');
    }


    document.getElementById('capture').addEventListener('click', function () {
        context.drawImage(video, 0, 0, 480, 320);
        var base64 = canvas.toDataURL('png');
        console.log(base64);

        $.ajax({
            url: "save.php",
            type: "POST",
            data: {
                image_base: base64
            },
            dateType: 'formData',
            enctype: 'multipart/form-data',
            async: false,
            success: function (result) {
                console.log(result);
            }
        });
    })
</script>
</body>

</html>

<?php

function format($base64)
{
    if (($l = strpos($base64, ';base64,')) !== false) {
        $p = explode('/', substr($base64, 0, $l));
        if (!empty($p[1])) {
            return '.' . $p[1];
        }

    }
    return '.unknown';
}

//echo $base64;
//  $base64是获取到前端传递的src里面的值，也就是我们的数据流文件
$base64 = $_POST['image_base'];
//  设置文件路径和文件前缀名称
$path = "./";
$prefix = 'nx_';
$output_file = $prefix . time() . rand(100, 999) . format($base64);
// 'data:image/png;base64,'
$base64 = str_replace(substr($base64, 0, strpos($base64, ';base64,') + 8), '', $base64);
$path = $path . $output_file;
//  创建将数据流文件写入我们创建的文件内容中
$ifp = fopen($path, "wb");
fwrite($ifp, base64_decode($base64));
fclose($ifp);
// 第二种方式
// file_put_contents($path, base64_decode($base64));
// 输出文件
echo json_encode([
    'message' => '上传成功',
    'save_file' => $output_file,
], 256);
exit;

分类 Html 下的文章

拍照上传图片

分类