Javascript 当尝试将HTML5画布标记的内容下载为PNG文件时，该文件为空_Javascript_Php_Html5 Canvas_Webrtc

Javascript 当尝试将HTML5画布标记的内容下载为PNG文件时，该文件为空

javascript php html5-canvas webrtc

Javascript 当尝试将HTML5画布标记的内容下载为PNG文件时，该文件为空,javascript,php,html5-canvas,webrtc,Javascript,Php,Html5 Canvas,Webrtc,我已经查看了几个已经发布在堆栈溢出上的线程，但不幸的是没有找到解决问题的方法我正在构建一个具有两个主要功能的文件：启动WebRTC视频流，并截取该流的屏幕截图，将其作为PNG文件保存到服务器。我已经设法完成了这两个功能，除了下载的文件是空白的问题。我可以打开它，确认它的属性，但没有可视数据。（右键单击并手动下载图像正常工作）我在AJAX/ToDataURL上的这个站点和其他站点上使用了和其他源代码的组合来构建以下代码 index.html <!DOCTYPE html> <

我已经查看了几个已经发布在堆栈溢出上的线程，但不幸的是没有找到解决问题的方法

我正在构建一个具有两个主要功能的文件：启动WebRTC视频流，并截取该流的屏幕截图，将其作为PNG文件保存到服务器。我已经设法完成了这两个功能，除了下载的文件是空白的问题。我可以打开它，确认它的属性，但没有可视数据。（右键单击并手动下载图像正常工作）

我在AJAX/

ToDataURL

上的这个站点和其他站点上使用了和其他源代码的组合来构建以下代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<video id="video"></video><br>
<canvas id="canvas" style="display: none;"></canvas>
<img id="photo" style="display: none;"></img>
<button id="photoButton">Take Picture</button>
<script>
    var width = 640;
    var height = 0;
    var streaming = false;
    var xhttp = new XMLHttpRequest();
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var photo = document.getElementById('photo');
    var photoButton = document.getElementById('photoButton');
    var data;

    window.addEventListener('load', function() {
        navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(function(stream) {
            video.srcObject = stream;
            video.play();
        }).catch(function(err) {
            console.log("An error occurred: " + err);
        });

        video.addEventListener('canplay', function(ev){
            if (!streaming) {
                height = video.videoHeight / (video.videoWidth/width);
                if (isNaN(height)) {
                    height = width / (4/3);
                }
            
                video.setAttribute('width', width);
                video.setAttribute('height', height);
                canvas.setAttribute('width', width);
                canvas.setAttribute('height', height);
                streaming = true;
            }
        }, false);

        photoButton.addEventListener('click', function(ev){
            takepicture();
            ev.preventDefault();
            sendPicture();
        }, false);

        function takepicture() {
            var context = canvas.getContext('2d');
            if (width && height) {
                canvas.width = width;
                canvas.height = height;
                context.drawImage(video, 0, 0, width, height);
                data = canvas.toDataURL('image/png');
                document.getElementById('photo').src = data;
            }
        }
        
        function sendPicture() {
            xhttp.open("POST", "testSave.php");
            xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhttp.onreadystatechange = function() {
                console.log(xhttp.responseText);
            }
            xhttp.send("imgData=" + photo.src);
        }
    });
</script>
</body>
</html>

第二个函数是

sendPicture

函数，它使用一个简单的XHTTP请求将文件发送到服务器

function sendPicture() {
     xhttp.open("POST", "testSave.php");
     xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     xhttp.onreadystatechange = function() {
         console.log(xhttp.responseText);
     }
     xhttp.send("imgData=" + photo.src);
}

更改这两个函数和testSave.php文件中的任何代码都不会更改任何内容或完全破坏上传的图像

我目前正在通过XAMPP在本地主机上进行测试，如果这有任何相关性的话

function takepicture() {
    var context = canvas.getContext('2d');
    if (width && height) {
        canvas.width = width;
        canvas.height = height;
        context.drawImage(video, 0, 0, width, height);
        data = canvas.toDataURL('image/png');
        document.getElementById('photo').src = data;
    }
}

function sendPicture() {
     xhttp.open("POST", "testSave.php");
     xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     xhttp.onreadystatechange = function() {
         console.log(xhttp.responseText);
     }
     xhttp.send("imgData=" + photo.src);
}