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

Using javascript to take snap shot but the code below i want to save it to database

本文关键字：保存 数据库 代码 javascript 快照 使用      更新时间：2023-09-26

下面是一个完整的代码，可以使用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>

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

我认为使用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代码。

如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＝"；上传/"-指定要放置文件的目录

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

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

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

此示例尚未完成。请参阅链接文章。本文没有描述如何在mysql中保存图像。你需要学习如何在书上或互联网上做到这一点。

相关文章：