投稿base64データJavaScript/jQuery

Question

私は、ユーザーが写真を（ブラウザ内で）編集してアップロードできるウェブサイトで作業しています。ブラウザで画像を編集するには、base64で画像を扱うJavaScriptライブラリをいくつか使用します。その結果、サーバーに画像をPOSTするには、ファイル入力のある単純なフォームを使用することはできません。隠された入力の値は、編集された画像のbase64文字列に設定され、それはPOSTされます。以下の短い例を参照してください。

http://pastebin.com/PrfWaS3D

明らかに、これは非常にストリップダウンされたが、それは私がに実行している問題を含んでいます。 3MBのアニメーションGIFをポストすると、6.5分かかりました。その間、私のコンピュータはほぼ完全に凍結/無反応でした。 （ただし、これはが完全にの小さな画像の場合）

OS /ブラウザの問題（Ubuntuの最新のGoogle Chrome）の可能性がありますが、私はそれを疑っています。そのファイルをフォームの中に入れ、base64形式のデータを削除すると（つまり、ファイルの標準的なポスティング）、それは約1秒で実行されます。

6.5分と1秒を比較します。私は間違ったことをしなければならない。私はここで間違って何をしていますか？代わりに私は何をしなければなりませんか？私はかなりWeb開発の新しいので、私は少し暗いです。私はbase64には1.3倍のサイズの増加があると認識していますが、ここでのアップロード時間は1.3倍ではないことは明らかです。私はちょっとしたコンソールをやりました。ログと

var base64 = reader.result; 

は約1秒かかります。だからボトルネックはそこにあるとは思わない。ボトルネックはアップロードする必要があります。しかし、なぜ？なぜフォームファイルを入力したのですかは、form64よりもはるかに高速です。

私は長い間巻き込まれた投稿をお詫び申し上げますが、私はウェブ開発の初心者です。本当には私の問題を理解していないので、すべての情報を取得するのは簡潔です。

おかげ

Answer 1

とにかくやや近代的なJSのAPIを使用しているので、それを使用する方がよいかもしれません：

• URL.createObjectURL()をBLOBからURLを作成するには（より速く、検査可能データのURLより） BASE64へ
• btoa()は
• FormDataがPOSTリクエスト
• XHR2までを作成する（もはや必要ではない）文字列をエンコードしますそれをサーバーに送信します（進捗状況も含まれます）。）

したがって、このような何か：

1. 取得ファイル：列を入力する
   file = input.files[0]
2. 変換、魔法を行い、ブロブに戻って変換します。
   blob = <magic here>
3. を作成します。POST：
   fd = new FormData; fd.append('file', blob, 'image.png');
4. アップロード：
   xhr = new XMLHttpRequest; ... xhr.send(fd);

Answer 2

<form action="1.php" method="post"> 
    <input type="text" id="txt" name="txt"> 
    <input type="submit" value="submit" > 
</form> 


function convertToDataURLviaCanvas(url, callback, outputFormat){ 
    var img = new Image(); 
    img.crossOrigin = 'Anonymous'; 
    img.onload = function(){ 
     var canvas = document.createElement('CANVAS'); 
     var ctx = canvas.getContext('2d'); 
     var dataURL; 
     canvas.height = this.height; 
     canvas.width = this.width; 
     ctx.drawImage(this, 0, 0); 
     dataURL = canvas.toDataURL(outputFormat); 
     callback(dataURL); 
     canvas = null; 
    }; 
    img.src = url; 
} 
convertToDataURLviaCanvas('1.jpg', function(base64Img){ 
    console.log(base64Img); 
    document.getElementById('txt').value= base64Img; 
}); 

1.php

echo '<img src="'.$_POST['txt'].'" />';