Question

下面是一个完整的代码，使用java脚本从您的网络摄像头拍摄快照，但是我遇到了如何将其保存到数据库的问题。我需要有关如何将其保存到数据库的帮助。我正在使用mysql数据库，我只想将捕获的图像存储在数据库中。

   <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display Webcam Stream</title>

<style>
#container {
    margin: 0px auto;
    width: 500px;
    height: 375px;
    border: 10px #333 solid;
}
#videoElement {
    width: 500px;
    height: 375px;
    background-color: #666;
}
#canvas {
    width: 500px;
    height: 375px;

    background-color: #CCC;
}
</style>

</head>

<body>
<!-- On iOS 6 we can use the file select input with the following attributes to capture an image from the camera -->
<input id="fileselect" type="file" accept="image/*" capture="camera">





<!-- Used to capture frame from webcam video feed -->
<input name="fff" type="button" id="save" value="Save" />

<-- Or alternatively added to an img tag -->

<img id="imgtag" src="" width="500" height="375" alt="capture" />'



<?php
 include 'conn.php';
if(isset($_POST['Ponti']))
{
     $abc = "<script>document.getElementByID('uri').value</script>";
echo $abc;

 $image = new Imagick($abc);
$data = $image->getImageBlob();
$data = $mysqli->real_escape_string($data);


}
mysql_close(); 


 ?>
<form name="form1" method="post" action="">
<input type="submit" name="Ponti" id="Ponti" value="Next" />
</form>

<-- For the JavaScript below -->
<script>
var video = document.querySelector("#videoElement");

// check for getUserMedia support
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {      
    // get webcam feed if available
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}

function handleVideo(stream) {
    // if found attach feed to video element
    video.src = window.URL.createObjectURL(stream);
}

function videoError(e) {
    // no webcam found - do something
}
var v,canvas,context,w,h;
var imgtag = document.getElementById('imgtag'); // get reference to img tag
var sel = document.getElementById('fileselect'); // get reference to file select input element

document.addEventListener('DOMContentLoaded', function(){
    // when DOM loaded, get canvas 2D context and store width and height of element
    v = document.getElementById('videoElement');
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    w = canvas.width;
    h = canvas.height;

},false);

function draw(v,c,w,h) {

    if(v.paused || v.ended) return false; // if no video, exit here

    context.drawImage(v,0,0,w,h); // draw video feed to canvas

   var uri = canvas.toDataURL("image/png"); // convert canvas to data URI

   // console.log(uri); // uncomment line to log URI for testing

   imgtag.src = uri; // add URI to IMG tag src








}

document.getElementById('save').addEventListener('click',function(e){

    draw(v,context,w,h); // when save button is clicked, draw video feed to canvas

});

// for iOS

// create file reader
var fr;

sel.addEventListener('change',function(e){
    var f = sel.files[0]; // get selected file (camera capture)

    fr = new FileReader();
    fr.onload = receivedData; // add onload event

    fr.readAsDataURL(f); // get captured image as data URI
})

function receivedData() {          
    // readAsDataURL is finished - add URI to IMG tag src
    imgtag.src = fr.result;

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

Answer 1

您的JS代码在客户端运行。因此，您应该将AJAX请求与您的图片一起发送，以将其存储在服务器上的数据库中。

Answer 2

我认为使用Ajax作为@Slam建议是最好的解决方案，但如果你对javascript不够熟悉，你也可以使用标准表单：

<!DOCTYPE html>
<html>
<body>

<form action="upload.php" method="post" enctype="multipart/form-data">
    Take a picture:
    <input id="fileToUpload" name="fileToUpload" type="file" accept="image/*" capture="camera">
    <input type="submit" value="Upload Image" name="submit">
</form>

</body>
</html>

当然，如果您愿意，可以将提交按钮替换为其他内容。

您还需要实现将接收文件并将其保存在数据库中的php代码。

如file upload in php中所述，您可以使用以下代码：

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
?>

其中：

$ target_dir =＆＃34;上传/＆＃34; - 指定文件的放置目录

$ target_file指定要上载的文件的路径

$ uploadOk = 1是一个变量，您可以稍后在代码中使用该变量来了解上传是否正常（如果发布的文件是预期的图像）

$ imageFileType保存文件的文件扩展名

此示例未完成。请参阅链接的文章。本文没有介绍如何在mysql中保存图像。您需要学习如何在书籍或互联网上进行操作。

使用javascript拍摄快照，但下面的代码我想将其保存到数据库

2 个答案: