javascript - 使用 AJAX 将图像从 Canvas 上传到 PHP 服务器

标签 javascript php ajax

在我正在构建的软件中,我正在使用网络摄像头拍照,然后将其上传到 PHP 服务器供以后使用。我已经使用表单成功地将图像从我的计算机上传到服务器,但是由于我要上传的图像已经预先确定,所以我一直在研究使用 AJAX。我从网络摄像头拍摄快照的代码如下:

 var video = document.getElementById('video');

        // Get access to the camera!
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            // Not adding `{ audio: true }` since we only want video now
            navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
                video.src = window.URL.createObjectURL(stream);
                video.play();
            });
        }

        // Elements for taking the snapshot
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');

        // Trigger photo take
        document.getElementById("snap").addEventListener("click", function () {
            var img = context.drawImage(video, 0, 0, 640, 480);
        });

        document.getElementById("capture").addEventListener("click", function () {
            context.drawImage(video, 0, 0, 640, 480);
            //var capture = canvas.toDataURL();
        });

这是我保存这张图片的 php 代码:

  <?php
    if (isset($_POST['upload'])) {
        $image_name = $_FILES['image']['name'];
        $image_name = $_FILES['image']['type'];
        $image_name = $_FILES['image']['size'];
        $image_tmp_name = $_FILES['image']['tmp_name'];

        if ($image_name == '') {
            echo "<script>alert('Please select an image.')</script>";
            exit();
        } else {
            move_uploaded_file($image_tmp_name, "pictures/$image_name");
            echo "Image uploaded succesfully.";
            echo "<img src= 'pictures/$image_name'>";
        }
    }
    ?>

我确信这两段代码都能正常工作,因为我已经分别对它们进行了测试。如前所述,我正在尝试使用 AJAX 将它们连接在一起。我为此找到的示例代码是:

function saveImage() {
            var capture = canvas.toDataURL("image/png");
            var xmlHttpReq = false;
            if (window.XMLHttpRequest) {
                ajax = new XMLHttpRequest();
            }

            else if (window.ActiveXObject) {
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            }
            ajax.open('POST', 'picture.php', false);
            ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            ajax.onreadystatechange = function () {
                console.log(ajax.responseText);
            }
            ajax.send("imgData=" + capture);
        }

我在按钮中使用了 onClick = "saveImage()"来尝试调用该函数并将图像上传到服务器。当我按下按钮时,该文件似乎根本无法访问服务器。有什么我想念的吗?

最佳答案

您没有将其作为文件发送,而是将其作为一次使用发送 BlobFile对象

var blob = new Blob([capture ], {type: 'application/octet-binary'});
var form = new FormData();
var fileName = 'snap.png';    //filename
form.append('something', blob, fileName);

在服务器上解码并保存

$dest = 'uploads/'.$_FILES['something']['name'];

move_uploaded_file($_FILES['something']['tmp_name'],$dest);
$file = file_get_contents($dest);
$tmp = explode(',',$file);                       //remove data: header
file_put_contents($dest,base64_decode($tmp[1])); //decode base64 n save

关于javascript - 使用 AJAX 将图像从 Canvas 上传到 PHP 服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40372352/

相关文章:

javascript - 本地主机上的谷歌距离矩阵

javascript - 在 Immutable.js 中获取嵌套值

php - 使用 PHPUnit 测试具有多个参数的构造函数

javascript - 获取 highcharts 以重新设置折线图的动画

javascript - 如何使用对象的对象渲染 React Native 平面列表?

javascript - 如何隐藏多个表单并通过事件单击jquery显示其中一个表单

PHP 如何跨行单元格,并使用查询使它们的文本垂直

javascript - 我如何逐步增强国家和州选择字段?

javascript - 如何在jsp中访问javascript值?

javascript - 如何在for循环中运行ajax后调用函数