Question

我有一个脚本可以从网络摄像头上传照片。图像可以正确发送它，但我需要发送文件savecam.php也给定，它将是用户ID。

<?php echo Auth::user()->id ?>

虽然代码的一部分是这样的：

    // Upload image to sever 
    document.getElementById("upload").addEventListener("click", function(){
        var dataUrl = canvas.toDataURL();
        $.ajax({
          type: "POST",
          url: "camsave.php",
          data: { 
             photo: dataUrl
          }
        }).done(function(msg) {
            console.log('saved');
        });
    });
}, false);

我应该添加，例如，

        // Upload image to sever 
        document.getElementById("upload").addEventListener("click", function(){
            var dataUrl = canvas.toDataURL();
            $.ajax({
              type: "POST",
              url: "camsave.php",
              data: { 
                 photo: dataUrl,
                 userID:  // <-- HERE ??
              }
            }).done(function(msg) {
                console.log('saved');
            });
        });
    }, false);
</script>

*********编辑**********

<div class="content">
    <video id="video" autoplay></video>
    <canvas id="canvas" width="640" height="480"></canvas>
    <button id="snap">Capture</button>
    <button type="reset" id="new">New</button>
    <button id="upload">Upload</button>
    <div id="userId" display="hidden" value="<?php echo Auth::user()->id ?>"></div>
</div>

<script>
            // Put event listeners into place
            window.addEventListener("DOMContentLoaded", function() {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d"),
                video = document.getElementById("video"),
                videoObj = { "video": true },
                image_format= "jpg",
                jpeg_quality= 95,
                errBack = function(error) {
                    console.log("Video capture error: ", error.code); 
                };

            // Put video listeners into place
            if(navigator.getUserMedia) { // Standard
                navigator.getUserMedia(videoObj, function(stream) {
                    video.src = stream;
                    video.play();
                }, errBack);
            } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia(videoObj, function(stream){
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errBack);
            } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
                navigator.mozGetUserMedia(videoObj, function(stream){
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }

            // Trigger photo take
            document.getElementById("snap").addEventListener("click", function() {
                context.drawImage(video, 0, 0, 640, 480);
                // Littel effects
                $('#video').fadeOut('slow');
                $('#canvas').fadeIn('slow');
                $('#snap').hide();
                $('#new').show();
                $('#upload').show();
            });

            // Capture New Photo
            document.getElementById("new").addEventListener("click", function() {
                $('#video').fadeIn('slow');
                $('#canvas').fadeOut('slow');
                $('#snap').show();
                $('#new').hide();
                $('#upload').hide();
            });

        // Upload image to sever 
        document.getElementById("upload").addEventListener("click", function(){
            var dataUrl = canvas.toDataURL("image/jpg", 0.95);
            var userId = document.getElementById('userId').getAttribute('value'); //get the value of the the
            $("#uploading").show();
            $.ajax({
              type: "POST",
              url: "camsave.php",
              data: { 
                 photo: dataUrl,
                  userId: userId
              }
            }).done(function(msg) {
                console.log('saved');
                $("#uploading").hide();
                $("#uploaded").show();
            });
        });
    }, false);
</script>

我也试过这个，但似乎改变javascript的部分并且你打破了一些东西就足够了，事实上，不再向我展示接受网络摄像头的消息。

Answer 1

试试这个

var dataUrl = canvas.toDataURL();
post_data = {

      photo: dataUrl,
      userID:  HERE
};
 $.ajax({
     type: "POST",
     url: "camsave.php",
     data: post_data
    }).done(function(msg) {
        console.log('saved');
    });

Answer 2

如果您执行此类操作，它应该可以使用，但它需要您在提交表单之前知道用户ID：

<div id="userId" display="hidden" value="<?php echo "your user id" ?>"></div>

因此，您将隐藏页面上的用户ID，然后在发送请求时将其拉出。

然后你可以这样做：

 document.getElementById("upload").addEventListener("click", function(){
            var dataUrl = canvas.toDataURL("image/jpg", 0.95);
            var userId = document.getElementById('userId').getAttribute('value');                           

            $("#uploading").show();
            $.ajax({
              type: "POST",
              url: "camsave.php",
              data: { 
                 photo: dataUrl,
                  userId: userId
              }
            }).done(function(msg) {
                console.log('saved');
                $("#uploading").hide();
                $("#uploaded").show();
            });
        //you have an extra "})" here, so remove it
        }, false);

这是一个JSFIDDLE，它尽可能地显示它的工作原理：https://jsfiddle.net/rq0qnc2y/5/

Answer 3

如果您运行下面的代码，您可以清楚地看到您可以将该值注入ajax调用。您可以使用http://phpfiddle.org/

测试代码

<?php

        class User
        {
            public $id = 1234;

            public function __get($name){
                return this;
            }
        }

        class Auth
        {
            public static function user(){
                return new User();
            }
        }


        echo Auth::user()->id;




        ?>
        <html>
            <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
            </head> 
            <body>
                <button id ="upload" width="100" height="100">click me</button>

                <script>
                document.getElementById("upload").addEventListener("click", function(){
                //var dataUrl = canvas.toDataURL();
                var dataUrl = "weeeh";
                $.ajax({
                  type: "POST",
                  url: "camsave.php",
                  data: { 
                      photo: dataUrl,
                     userId: <?php echo Auth::user()->id; ?>
                  }
                }).done(function(msg) {
                    console.log('saved');
                });
                });

                </script>
            </body>
        </html>

enter image description here

在javascript POST中插入变量

3 个答案: