如何使用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); 
      }); 
});

代碼進行拍照，並繪製它的變量，這是一個帆布

來源

2017-06-13 Caanphobia

你可以從畫布上獲得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回收到數據存儲圖像與適當的內容到服務器中。

瞭解如何將圖像發送到服務器可能會對您有所幫助。

來源

2017-06-13 07:33:06

如何使用jQuery保存照片？

回答

相關問題