如何使用jQuery保存照片？

问题描述：

我正在开发一个使用html，javascript和php的软件。它应该使用网络摄像头保存图片，然后将其保存到数据库中。如何使用jQuery保存照片？

事情是，它没有问题的照片，但我实际上不知道如何将图片保存到文件，以及哪种格式将其更高效地保存到MySql数据库中。

以下是我正在服用的照片：

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); 
      }); 
});

代码进行拍照，并绘制它的变量，这是一个帆布

你可以从画布上获得base64图像吗？ – Akshay

答

它可以通过以下步骤来完成：

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; 
?>

发生了什么事吗？

首先我在一个隐藏input字段编码格式BASE64加入canvas低于form存储图像。

其次JS脚本得到base64 encoded format从canvas并将其存储内容为hidden input领域。

现在，当用户提交表单上传图像时，数据将以编码格式发送到包含image的服务器。

第三PHP代码中删除数据：图像/ PNG; BASE64，和decode回收到数据存储图像与适当的内容到服务器中。

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

如何使用jQuery保存照片？

相关推荐