1

ページにwebcam streamを表示するvideo 要素があります。次に、スナップショットを取得してキャンバスに画像を表示する関数を備えたキャンバスがあります。次に、このキャンバス イメージをサーバーに送信し、PHP でファイルに保存する必要があります。さまざまなチュートリアルをオンラインで組み合わせて、以下のコードになりましたが、サーバーフォルダーに保存されている画像は空白であるため、PHPファイルが表示するデータを適切に受け取っていないと思います...できれば助けてください: )ポスト変数を送信しないJquery + AJAXのみが問題です...コードは次のとおりです。

var int=self.setInterval(function(){snapshot()},2000);

    function snapshot() {
      // Draws current image from the video element into the canvas
        ctx.drawImage(output, 0,0, canvas.width, canvas.height);
        var dataURL = canvas.toDataURL();
        dataURL = dataURL.replace('data:image/png;base64,','');

        $.ajax({
        type: 'POST',
        url: 'onlinewebcams.php',
        data: postData,
        contentType: 'application/json'
        });

    }

そして、別のPHPファイルがありますが、POSTされた画像を保存する同じページに含まれています(動作しません):

PHPファイルのコードは次のとおりです。

sleep(5); // wait 5 seconds
define('UPLOAD_DIR', 'allwebcams/');
$img = $_POST['dataURL'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR .uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
4

2 に答える 2

2

ここ！最初にphpを使用してキャンバス画像データをアップロードし、画像データをphpファイルに送信してajaxを呼び出し、phpファイルで画像データを取得するアップロードスクリプトはその下にあります：したがって、このソリューションが表示されます。

$upload_dir = "upload/";
$iid = $_POST['id'];
$img_encode = str_replace('data:image/png;base64,', '', $iid);
$img = str_replace(' ', '+', $img_encode);
$data = base64_decode($img);
echo $filename = md5(uniqid()) . '.png';
$file = $upload_dir.$filename;
file_put_contents($file, $data);
于 2013-12-14T05:08:04.557 に答える
2

いくつかのこと：

クライアント側：

ajax POST で postData を定義していないため、ajax は空白の文字列を送信しています。

代わりに dataURL を送信する必要があります。データ パケットは名前のない文字列です。

データをオブジェクトにラップすることを好みます。そうすれば、後でエンコードされた画像以外の情報を送信する必要が生じた場合に、オブジェクトに別のプロパティを追加するだけです。たとえば、画像を生成した Web カメラの ID と、画像が生成された時刻を送信したい場合があります。

ところで、送信されるコンテンツ タイプは json ではなく、base64 でエンコードされた画像データです。PHP は処理するデータ型を認識しているため、コンテンツ タイプを省略できます。

また、成功/失敗を示す PHP からの応答や、保存したばかりのファイルの名前を取得したい場合もあります。これは、ajax POST の .done 応答コールバック ハンドラで行うことができます。

このAJAX POSTを試してください：

// create a dataUrl from the canvas
var dataURL= canvas.toDataURL();

// post the dataUrl to php
$.ajax({
  type: "POST",
  url: "onlinewebcams.php",
  data: {image: dataURL}
}).done(function( respond ) {
  // you will get back the temp file name
  // or "Unable to save this image."
  console.log(respond);
});

data:image/png;base64ajax の前または PHP 内で、データ型ヘッダー ( ) を取り除くことができます。

あなたのコードでは、クライアントコードとPHPコードの両方でそれを取り除きます--不要です;）

PHP

PHPコードで眠っている理由がよくわかりません--とにかく...

PHP では、データを処理する前に、データが存在し、空でないことを常に確認する必要があります。一部の php サーバーは、空のデータ パケットが供給されると特に動揺します。

あなたの $img=$_POST['dataURL'] は、存在しない名前付きのデータを要求しています。これが、php が作成している空のファイルの理由です。

次の PHP コードを試してください。

// make sure the image-data exists and is not empty
// xampp is particularly sensitive to empty image-data 
if ( isset($_POST["image"]) && !empty($_POST["image"]) ) {    

    // get the dataURL
    $dataURL = $_POST["image"];  

    // the dataURL has a prefix (mimetype+datatype) 
    // that we don't want, so strip that prefix off
    $parts = explode(',', $dataURL);  
    $data = $parts[1];  

    // Decode base64 data, resulting in an image
    $data = base64_decode($data);  

    // create a temporary unique file name
    $file = UPLOAD_DIR . uniqid() . '.png';

    // write the file to the upload directory
    $success = file_put_contents($file, $data);

    // return the temp file name (success)
    // or return an error message just to frustrate the user (kidding!)
    print $success ? $file : 'Unable to save this image.';

}

そしていつもの落とし穴：

  • アップロード ディレクトリが正しく設定されていることを確認してください。
  • アップロード ディレクトリに適切な権限が設定されていることを確認してください。
于 2013-09-11T17:21:06.587 に答える