Question

我正在使用社交媒体类型网站，用户可以通过网络摄像头拍摄照片。现在，拍摄图像会将其转换为带有base64编码的数据网址。该文件将写入服务器，但它始终为空白。更奇怪的是，文件大小不一，从600kb到1MB不等。我正确传递文件了吗？这是我从网络摄像头拍摄快照的代码：

<html>
<head>
    <title>Camagru</title>
    <link rel="stylesheet" href="main.css">
    <form id="userbox" class="smoothbox" method="post">
        <div>
            <?php
            if ($_SESSION['name'])
                echo "<fnt_main id='welcome'>Welcome Back " . $_SESSION['name'] . " " . $_SESSION['surname'] . "</fnt_main>";
            else
                echo "<fnt_main id='welcome'>Not Logged In!</fnt_main>";
            ?>
        </div>
        <fnt_main>Email: </fnt_main><input type="email" name="email">
        <fnt_main>Password: </fnt_main><input type="password" name="password">
        <form action="editor.php">
            <input style="margin-left: 10px;" class="button" type="submit" name="submit" value="Login">
            <input style="margin-left: 10px;" class="button" type="submit" name="logout" value="Logout">
        </form>
    </form>
</head>
<body>
    <div id="topbox" class="smoothbox">
        <a href="index.php" style="text-decoration: none;"><div id="title">Camagru</div></a>
        <form id="navigatebox" class="smoothbox">
            <input class="button" type="button" value="Home" onclick="window.location.href='http://localhost:8080/camagru/index.php'">
            <input style="margin-top: 10px;" type="button" class="button" <?php if ($_SESSION['name'] == ""){ ?> disabled value="Login First!" <?php   } ?> value="Editor" onclick="window.location.href='http://localhost:8080/camagru/editor.php'">
            <input style="margin-top: 10px;" class="button" type="button" value="Gallery" onclick="window.location.href='http://localhost:8080/camagru/gallery.php'">
            <input style="margin-top: 10px;" class="button" type="button" value="Register" onclick="window.location.href='http://localhost:8080/camagru/register.php'">
        </form>
    </div>
    <div id="videobox" class="smoothbox">
        <video id="video" autoplay></video>
        <button id="snap" class="button">Snap Photo</button>
    </div>
    <div id="canvasbox" class="smoothbox">
        <canvas id="canvas" width="800px" height="600px"></canvas>
    </div>
    <script>
        function sendimagetourl(image)
        {
            var data = "img=" + image;
            var httpc = new XMLHttpRequest();
            var url = "saveimage.php";
            httpc.open("POST", url, true);

            httpc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            httpc.onreadystatechange = function() {
                if(httpc.readyState == 4 && httpc.status == 200) {
                    //alert(httpc.responseText);
                }
            }
            httpc.send(data);
        }
        //Stream Video
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
        {
            navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
            video.src = window.URL.createObjectURL(stream);
            video.play();
            });
        }
        //Snap Photo
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');

        document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);var image = canvas.toDataURL("image/png"); sendimagetourl(image);});
    </script>
    <hr style="margin-top: 20px;">
    <h4 style="text-align: right">Made By...</h4>
</body>
<footer>
</footer>

如何从画布数据网址修复空白图像？

0 个答案: