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

コード画像を取得して変数に描画し、キャンバス

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

ここで何が起こっていますか？まず

私は隠れinputフィールドにフォーマットエンコードさBASE64に格納画像にcanvas以下formを加えました。

第二JSスクリプトhidden inputフィールドにcanvasとbase64 encoded formatに記憶するからコンテンツを取得します。

ユーザーが画像をアップロードするためにフォームを送信すると、データは符号化形式のimageを含むサーバーに送信されます。

第三PHPコードデータ削除：画像/ PNG、サーバに適切なコンテンツを有する店舗画像に戻って受け取ったデータをBASE64、とdecodeを。

イメージをサーバーに送信する方法を理解することは役に立ちます。