javascript - 如何使用 jQuery 保存照片？

Question

我正在使用 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 )中

Answer 1

可以通过以下步骤完成:

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，并解码返回收到的数据将具有适当内容的图像存储到服务器中。

了解如何将图像发送到服务器可能会对您有所帮助。