php5.6 フレームワーク等は使用しておりません。当方の知識不足で、稚拙な質問となっておりますのでご了承ください。 html5の[input　file]でファイルをサーバー側のフォルダに保存してそれをブラウザ上で表示させたいと考えております。 PCでは、アップロードされる画像ファイル等の容量制限にて大きなファイルはアップロード出来ないようにしております。しかし、モバイル端末で撮影された画像等の容量が大きいためアップロードが出来ない状況です。ユーザーにモバイル端末でアップロード前に容量を落としてもらう作業をさせたくないと考えています。そこで、私なりに調べて見た結果、下記のようにBLOB型で指定したサーバーのディレクトリに画像を保存してもしくは、データベースに入れる方法があり、サーバーのディレクトリに画像を保存することは出来ました。ですが、そのBLOB型のデータをブラウザに出力する方法が解らないのが現状です。大変稚拙な質問であると思いますが、お力をお貸し下さい。また、下記の仕組みを使わず、モバイル端末等で画像の容量等を圧縮してアップロードする方法がございましたら、お教え頂けると幸いです。むしろ下記の方法以外の、手段をお教え頂けますと助かります。宜しくお願い致します。 ```html ``` ```ここに言語を入力 //ここで出力

``` ```javascript function canvasDraw() { var file = $("#imageSelect").prop("files")[0]; //画像ファイルかチェック if (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") { alert("画像ファイルを選択してください"); $("#imageSelect").val(''); //選択したファイルをクリア } else { var fr = new FileReader(); fr.onload = function() { //選択した画像を一旦imgタグに表示 $("#preview").attr('src', fr.result); //imgタグに表示した画像をimageオブジェクトとして取得 var image = new Image(); image.src = $("#preview").attr('src'); //縦横比を維持した縮小サイズを取得 var w = 800; var ratio = w / image.width; var h = image.height * ratio; //canvasに描画 var canvas = $("#canvas"); var ctx = canvas[0].getContext('2d'); $("#canvas").attr("width", w); $("#canvas").attr("height", h); ctx.drawImage(image, 0, 0, w, h); }; fr.readAsDataURL(file); } } function imageUpload() { var form = $("#imageForm").get(0); var formData = new FormData(form); //画像処理してformDataに追加 if ($("#canvas").length) { //canvasに描画したデータを取得 var canvasImage = $("#canvas").get(0); //オリジナル容量(画質落としてない場合の容量)を取得 var originalBinary = canvasImage.toDataURL("image/jpeg"); //画質落とさずバイナリ化 var originalBlob = base64ToBlob(originalBinary); //オリジナル容量blobデータを取得 console.log(originalBlob["size"]); //オリジナル容量blobデータをアップロード用blobに設定 var uploadBlob = originalBlob; //オリジナル容量が2MB以上かチェック if(2000000 <= originalBlob["size"]) { //2MB以下に落とす var capacityRatio = 2000000 / originalBlob["size"]; var processingBinary = canvasImage.toDataURL("image/jpeg", capacityRatio); //画質落としてバイナリ化 uploadBlob = base64ToBlob(processingBinary); //画質落としたblobデータをアップロード用blobに設定 console.log(capacityRatio); console.log(uploadBlob["size"]); } //アップロード用blobをformDataに追加 formData.append("selectImage", uploadBlob); } //formDataをPOSTで送信 $.ajax({ async: false, type: "POST", url: "http://*******.com/image", data: formData, dataType: "text", cache: false, contentType: false, processData: false, error: function (XMLHttpRequest) { console.log(XMLHttpRequest); alert("アップロードに失敗しました"); }, success: function (res) { if(res !== "OK") { console.log(res); alert("アップロードに失敗しました"); } else { alert("アップロードに成功しました"); } } }); } // 引数のBase64の文字列をBlob形式にする function base64ToBlob(base64) { var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得 data = window.atob(base64Data), // base64形式の文字列をデコード buff = new ArrayBuffer(data.length), arr = new Uint8Array(buff), blob, i, dataLen; // blobの生成 for (i = 0, dataLen = data.length; i < dataLen; i++) { arr[i] = data.charCodeAt(i); } blob = new Blob([arr], {type: 'image/jpeg'}); return blob; } ``` ```php //出力用　load.php $datas['image']　= '****.blob' header("Content-Type: image/jpeg"); readfile($datas['image']); exit(); ```

	@@ -1 +1 @@
1	- モバイル端末での画像アップロードについて
1	+ （アップロード容量制限）モバイル端末での画像アップロードについて

質問編集履歴