我正在使用 html、javascript 和 php 开发一个软件。它应该使用网络摄像头保存图片,然后将它们保存到数据库中。
问题是,它毫无问题地获取图片,但我实际上不知道如何将图片保存到文件中,以及哪种格式将其保存到 MySql DB 中更有效。
这是我拍照的方式:
jQuery(document).ready(function(){
//Este objeto guardará algunos datos sobre la cámara
window.datosVideo = {
'StreamVideo': null,
'url' : null
};
jQuery('#botonFoto').on('click', function(e){
var oCamara,
oFoto,
oContexto,
w, h;
oCamara = jQuery('#videoElement');
oFoto = jQuery('#foto');
w = oCamara.width();
h = oCamara.height();
oFoto.attr({'width': w, 'height': h});
oContexto = oFoto[0].getContext('2d');
oContexto.drawImage(oCamara[0], 0, 0, w, h);
});
} );
代码获取图片并将其绘制在变量(即 Canvas )中
最佳答案
可以通过以下步骤完成:
HTML:
<canvas id="foto"></canvas>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="img" id="img_val">
<input type="submit" name="submit" value="submit" />
</form>
JS:
<script type="text/javascript">
var c = document.getElementById("foto");
document.getElementById("img_val").value = c.toDataURL();
</script>
PHP:
<?php
if(isset($_POST['submit'])) :
$data = $_POST['img'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
file_put_contents('uploads/image.png', $data);
endif;
?>
这里发生了什么?
首先我在 Canvas
下方添加了一个表单
,以将base64编码格式的图像存储在隐藏的输入
字段。
其次 JS
脚本从 canvas
获取内容,并将其以 base64 编码格式
存储到 隐藏输入
字段。
现在,当用户提交上传图像的表单时,数据将被发送到包含编码格式的图像
的服务器。
第三 PHP
代码删除data:image/png;base64,并解码
返回收到的数据将具有适当内容的图像存储到服务器中。
了解如何将图像发送到服务器可能会对您有所帮助。
关于javascript - 如何使用 jQuery 保存照片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44512645/