Question

嗨，我正在处理项目中的问题。

代码从视频中提取图像并创建一个带有在其上提取的图像的画布，这种方法很好但是在尝试上传从视频创建的base64数据图像时。它在服务器上生成一个0字节的图像。

任何人都知道为什么??

HTML：

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script type="text/javascript" src="https://www.dudoby.com/js/jquery.min.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>

<body>

 <div class="booth">
 <video id="video" width="400" height="300" autoplay></video>
 </div>

<iframe style="visibility: hidden;" name="u-n"></iframe>

<button id="capture">Capture</button>
<form id="submitphoto" action="../success/upload_video" method="POST" enctype="multipart/form-data">
<div id="output">   
</div>
</form>

<script type="text/javascript" src="js/video.js"></script>

</body>
</html>

JS文件：

(function() {

var video = document.getElementById('video'), 
vendorUrl = window.URL || window.webkitURL;

navigator.getMedia = navigator.getUserMedia ||
                     navigator.webkitGetUserMedia ||
                     navigator.mozGetUserMedia ||
                     navigator.msGetUserMedia;

    //Capture video
    navigator.getMedia({
    video: true,
    audio: false
    }, function(stream){
    video.src = vendorUrl.createObjectURL(stream);
    blob = video.src;
    video.play();

    }, function(error) {
      //An error ocurred
      //error.code
    });


//Get image
    var video, $output;
    var scale = 0.25;

    var initialize = function() {
        $output = $("#output");
        video = $("#video").get(0);
        $("#capture").click(captureImage);                
    };

    var captureImage = function() {
        var canvas = document.createElement("canvas");
        canvas.width = video.videoWidth * scale;
        canvas.height = video.videoHeight * scale;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

        var img = document.createElement("img");
        img.src = canvas.toDataURL();
        $output.prepend(img);

        var input = document.createElement("input");
        input.setAttribute("type", "hidden");
        input.setAttribute("name", "data");
        input.value = canvas.toDataURL();
        $output.prepend(input);

        $("#submitphoto").submit();
  };


    $(initialize);    

})();

PHP FiLE：

<?php 
session_start();
ob_start();
$logged_user = $_SESSION['valid_user'];
include("../adb/thisdb.php");
error_reporting(0);

$file = $_POST['data'];
$img = str_replace('data:image/png;base64,', '', $file);
file_put_contents('../video_streaming/testimg.png', base64_decode($img));




ob_flush();
?>

编辑＆gt;修复：在尝试了很多事情之后，我最终通过将表单网址更改为直接完整地址来修复错误。

 <form target="u-n" id="submitphoto" action="../success/upload_video" method="POST" enctype="multipart/form-data">

工作一：

 <form target="u-n" id="submitphoto" action="https://www.dudoby.com/success/upload_video" method="POST" enctype="multipart/form-data">

使用base64 file_put_contents时，服务器上传一个0字节的文件

0 个答案: