Question

如果我保存包含绘图的<canvas>。一切都很好。但是，如果我想保存包含图像的canvas（来自网络摄像头流的帧），它将无法正常工作，并且不会向服务器发送任何内容。有人有一些想法吗？

HTML：

<video id="VideoCamera" autoplay></video>
<canvas id="testCanvas" width="300" height="300"></canvas>
<textarea id="debugConsole" rows="10" cols="60">Data</textarea>
<button onclick="saveViaAJAX();">Save Via AJAX</button>
<input id="button" type="button" value="photo" onclick="snapshot()" />
<input id="button1" type="button" value="bubble" onclick="bubble()" />

<script type="text/javascript">
    // This portion webcam setup
    var video = document.getElementsByTagName('video')[0];
    var localMediaStream = null;
    if (navigator.getUserMedia) {
        navigator.getUserMedia('video', successCallback, errorCallback);
        function successCallback(stream) {
            video.src = stream;
            localMediaStream = stream;
        }
        function errorCallback(error) { heading.textContent = "An error occurred: [CODE " + error.code + "]"; }
    }
    else {
        heading.textContent = "Native web camera streaming is not supported in this browser!";
    }

    //draw something in canvass
    var canvas = document.getElementById("testCanvas");
    if (canvas.getContext) {
        var canvasContext = canvas.getContext("2d");    
        canvasContext.fillStyle = "rgb(" + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + ")";
        canvasContext.beginPath();
        canvasContext.arc(Math.random() * 350, Math.random() * 350, Math.random() * 20, 0, Math.PI * 2, true);
        canvasContext.fill();
    }

    // This portion of the code simply draws random circles into the canvas (it has nothing todo with saving the canvas).
    function bubble() {
        var canvas = document.getElementById("testCanvas");
        var canvasContext = canvas.getContext("2d");
        for (i = 0; i < 150; i++) {
            canvasContext.fillStyle = "rgb(" + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + "," + (parseInt(Math.random() * 255)) + ")";
            canvasContext.beginPath();
            canvasContext.arc(Math.random() * 350, Math.random() * 350, Math.random() * 20, 0, Math.PI * 2, true);
            canvasContext.fill();
        }
    }

    // This portion of the code take snaphot from wecam
    function snapshot() {
        var canvas = document.getElementById("testCanvas");
        var canvasContext = canvas.getContext("2d");
        canvasContext.drawImage(video, 0, 0, 240, 320);
    }


    // This portion of the code save canvass to server
    function saveViaAJAX() {
        var canvas = document.getElementById("testCanvas");
        var canvasContext = canvas.toDataURL("image/png");
        var postData = "canvasData=" + canvasContext;
        var debugConsole = document.getElementById("debugConsole");
        debugConsole.value = canvasContext;

        var ajax = new XMLHttpRequest();
        ajax.open("POST", 'Save.php', true);
        ajax.setRequestHeader('Content-Type', 'canvas/upload');
        ajax.setRequestHeader('Content-TypeLength', postData.length);

        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4) {
                debugConsole.value = canvasContext + " " + debugConsole.value;
            }
        }
        ajax.send(postData);
    }

PHP save.php代码：

$png =$_POST['data'];
$filteredData=substr($png, strpos($png, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'image.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );

谢谢！

Answer 1

请检查picEdit project，它实现从相机拍摄快照。在PC和Android上测试过（使用Chrome时，原生浏览器似乎不支持访问摄像头）：

演示：http://andyvr.github.io/picEdit/
下载：https://github.com/andyvr/picEdit

如何在HTML页面中使用网络摄像头拍摄快照？

1 个答案: