Fatal编程技术网
  • javascript/
  • 使用javascript拍摄快照，但下面的代码我想将其保存到数据库中

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

javascript php html

使用javascript拍摄快照，但下面的代码我想将其保存到数据库中,javascript,php,html,Javascript,Php,Html,下面是使用java脚本从您的网络摄像头拍摄快照的完整代码，但摄像头在如何将其保存到数据库方面存在问题。请告诉我如何将其保存到数据库。我使用的是一个mysql数据库，我只希望捕获的图像存储在数据库中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Display Webcam Stream</title> <style> #contai

下面是使用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>


显示网络摄像头流
#容器{
保证金：0px自动；
宽度：500px；
身高：375px；
边框：10px#333实心；
}
#视频元素{
宽度：500px；
身高：375px；
背景色：#666；
}
#帆布{
宽度：500px；
身高：375px；
背景色：#CCC；
}
'

您的JS代码正在客户端运行。因此，您应该发送带有图片的AJAX请求，将其存储在服务器上的数据库中。
我认为使用@Slam建议的AJAX是最好的解决方案，但如果您对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>




拍一张照片：


当然，如果您愿意，您可以用其他按钮代替submit按钮

您还需要实现接收文件并将其保存在数据库中的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=“uploads/”-指定要放置文件的目录

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

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

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


此示例尚未完成。请参考链接文章。本文没有描述如何在mysql中保存图像。您需要学习如何在书上或互联网上进行此操作。
谢谢，它起到了作用，但是否有一种方法可以在上传到文件夹之前调整图像大小以减小d大小，其次，在上传之前如何在页面上显示图像。php