0

JavaScriptがAJAX経由で画像のDataURIを投稿し、PHPがそれを受け取って画像にデコードする画像アップロードを作成しようとしています。

問題は、最終製品がイメージ ファイルでないことを除いて、すべて正常に動作していることです。

次のコード例を見てください。

JavaScript:

dataString='encodedimg='+e.target.result.match(/,(.*)$/)[1]+'&type='+type;
$.ajax({
  url: 'uploadhandler_ajax.php',
  type: 'POST',
  data: dataString,
  success: function(data){
    //print success message
  });

PHP:

$encodedimg = $_POST['encodedimg'];
file_put_contents('asdf.png', base64_decode($encodedimg));

$_POST['encodedimg']オンラインの base64 コンバーターを使用して適切なイメージを生成するため、問題はありません。file_put_contents()したがって、 orの誤用があると想定していbase64_decode()ます。

助けてくれてありがとう！

4

2 に答える 2

0

PHPで画像を読み取るには、次のような関数を使用しました

function rcd($data) {
    $p = strpos($data, ',');
    $d = base64_decode(substr($data, $p+1));
    $rfn = md5(mt_rand(1,123123123));
    file_put_contents($rfn, $d, LOCK_EX);
    return $rfn;
}

使用例: $img_file_name = rcd($_POST['image_data']);

JS の部分では注意が必要です (さまざまなブラウザーなど)。まず、画像データが必要です。現在、これがどのように供給されているか正確ではなく、コード例にはヒントがありません。いくつかのオプションを想定できます

シンプル必要な手段でdataStringを適切に入力すると、例は基本的に機能するはずです

imgdata = .... // any means of getting the data

$.ajax({
  url: 'uploadhandler_ajax.php',
  type: 'POST',
  image_data: imgdata,
  success: function(data){
    //print success message
});

それほど単純ではありません画面上に Canvas オブジェクトがあり、何らかの手段でデータが取り込まれ、そのデータを送信したいとします。上記は何でも当てはまりますが、画像データを取得する方法は次のようになります

var canv = document.getElementById('id_of_canvas');
imgdata = canv. toDataURL('image/jpeg', 0.88); // last arg is quality

ただし、一部のブラウザー (モバイル) はこれをサポートしていない可能性があるため、JS 用の JPEGEncoder を見つけて、以下のコードと共にプロジェクトに追加することをお勧めします。

var tdu = HTMLCanvasElement.prototype.toDataURL;
HTMLCanvasElement.prototype.toDataURL = function(type,param1)
{
 var res = tdu.apply(this,arguments);
 if(res.substr(0,11) != "data:image/")
 {
  var encoder = new JPEGEncoder();
  return encoder.encode(this.getContext("2d").getImageData(0,0,this.width,this.height), (param1 ? param1*100 : 88));
 }
 else return res;
}

お役に立てれば！

于 2013-07-28T12:10:27.140 に答える
0

@Marcin Gałczyński の場合:

$.ajax({
  url: 'uploadhandler_ajax.php',
  type: 'POST',
  image_data: imgdata,
  success: function(data){
    //print success message
  }
})

jQuery.ajaxにはimage_data jQuery.ajaxがなかったと思います

于 2013-07-28T12:39:20.213 に答える