VERSION1: 標準の html ファイルのアップロードと VERSION2: html5 fileApi および ajax のアップロードを比較しました。html5 fileApi と ajax のアップロードは、古い html ファイルのアップロードよりもはるかに遅いことがわかりました。
- バージョン 2 のアップロードがバージョン 1 よりもずっと遅いのはなぜですか?
- version2 でアップロードを高速化するにはどうすればよいですか?
バージョン1:
HTML
<g:form method="post" accept-charset="utf-8" enctype="multipart/form-data"
name="imageUploaderForm" id="imageUploaderForm" url="someurl">
<input type="file" accept="image/jpeg, image/gif, image/png"
name="image" id="image" />
</form>
JS (私はJQueryFormを使用します)
$("#image").change(function() {
$("#imageUploaderForm").ajaxForm({
complete: function(response){
console.log("upload complete");
}
});
$("#imageUploaderForm").submit();
});
サーバー コード Grails 2.2.4:
CommonsMultipartFile file = (CommonsMultipartFile) request.getFile('image')
byte [] imageBytes = file.getBytes()
バージョン 2:
HTML
<g:form method="post" accept-charset="utf-8" enctype="multipart/form-data"
name="imageUploaderForm" id="imageUploaderForm" url="someurl"></form>
<input id="UploadFileInput" class="UploadFileInput" type="file" name="image" accept="image/jpeg, image/gif, image/png" />
JS ( jquery の filereader API をラップするだけのfilereader.jsを使用します) アップロードする前に画像を操作する必要があるため、アップロードした画像を html5 キャンバスに読み込みました。
var fileReaderOpts = {
readAsDefault: 'BinaryString',
on: {
load: function(event, file) {
var $img = $('<img>'),
imgWidth, imgHeight;
$img.load(function() {
// Create the canvas.
$originalCanvas = $('<canvas data-caman-hidpi-disabled>');
var originalContext = $originalCanvas[0].getContext('2d');
// Save image to canvas
$originalCanvas[0].width = this.width;
$originalCanvas[0].height = this.height;
originalContext.drawImage(this, 0, 0);
// some image modification on the canvas
// send image to server
var imageUrl = $originalCanvas[0].toDataURL();
$("#imageUploaderForm").ajaxForm({
data: {
img : imageUrl,
},
complete: function(response){
console.log("upload complete");
}
});
$("#imageUploaderForm").submit();
}); // end $img.load
// Set the src of the img, which will trigger the load event when done
$img.attr('src', event.target.result);
},// end load
beforestart: function(file) {
// Accept only images. Returning false will reject the file.
return /^image/.test(file.type);
}
}
};
// Bind the fileReader plugin the upload input and the drop area.
$("UploadFileInput").fileReaderJS(fileReaderOpts);
サーバー コード Grails 2.2.4:
String imgBase64 = params.image
imgBase64 = imgBase64.trim().replaceFirst("data:image/png;base64,", "")
byte[] imageBytes = Base64.decode(imgBase64.getBytes())
これが私が測定したものです：
バージョン 1 とバージョン 2 の両方、および pinterest と flickr で 7.5 MB のサイズの jpg 画像をアップロードしました。フォームが送信された瞬間にクライアント側で画像が処理された後、バージョン 1 とバージョン 2 のタイマーを開始しました。
注: キャンバス関連のコードは時間に含まれません。この後、測定から始めました。
結果：
- バージョン 1: 1.16 分
- version2: 3.43 分
- ピンタレスト: 1.09 分
- フリッカー：1.11分