php5.6
フレームワーク等は使用しておりません。
当方の知識不足で、稚拙な質問となっておりますので
ご了承ください。
html5の[input file]でファイルをサーバー側のフォルダに保存して
それをブラウザ上で表示させたいと考えております。
PCでは、アップロードされる画像ファイル等の容量制限にて
大きなファイルはアップロード出来ないようにしております。
しかし、モバイル端末で撮影された画像等の容量が大きいため
アップロードが出来ない状況です。ユーザーにモバイル端末でアップロード前に
容量を落としてもらう作業をさせたくないと考えています。
そこで、私なりに調べて見た結果、下記のようにBLOB型で指定した
サーバーのディレクトリに画像を保存してもしくは、データベースに入れる方法が
あり、サーバーのディレクトリに画像を保存することは出来ました。
ですが、そのBLOB型のデータをブラウザに出力する方法が解らないのが
現状です。
大変稚拙な質問であると思いますが、お力をお貸し下さい。
また、下記の仕組みを使わず、モバイル端末等で画像の容量等を
圧縮してアップロードする方法がございましたら、お教え頂けると
幸いです。
むしろ下記の方法以外の、手段をお教え頂けますと助かります。
宜しくお願い致します。
html
1<form action="" method="post" id="imageForm"> 2 <img src="" id="preview" /> 3 <canvas id="canvas"></canvas> 4 <input type="file" id="imageSelect" onChange="canvasDraw();" /> 5 <input type="button" onClick="imageUpload();" value="アップロード" /> 6</form> 7
//ここで出力 <img src="load.php">
javascript
1 function canvasDraw() { 2 var file = $("#imageSelect").prop("files")[0]; 3 4 //画像ファイルかチェック 5 if (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") { 6 alert("画像ファイルを選択してください"); 7 $("#imageSelect").val(''); //選択したファイルをクリア 8 9 } else { 10 var fr = new FileReader(); 11 12 fr.onload = function() { 13 //選択した画像を一旦imgタグに表示 14 $("#preview").attr('src', fr.result); 15 16 //imgタグに表示した画像をimageオブジェクトとして取得 17 var image = new Image(); 18 image.src = $("#preview").attr('src'); 19 20 //縦横比を維持した縮小サイズを取得 21 var w = 800; 22 var ratio = w / image.width; 23 var h = image.height * ratio; 24 25 //canvasに描画 26 var canvas = $("#canvas"); 27 var ctx = canvas[0].getContext('2d'); 28 $("#canvas").attr("width", w); 29 $("#canvas").attr("height", h); 30 ctx.drawImage(image, 0, 0, w, h); 31 }; 32 33 fr.readAsDataURL(file); 34 } 35} 36 37function imageUpload() { 38 var form = $("#imageForm").get(0); 39 var formData = new FormData(form); 40 41 //画像処理してformDataに追加 42 if ($("#canvas").length) { 43 //canvasに描画したデータを取得 44 var canvasImage = $("#canvas").get(0); 45 46 //オリジナル容量(画質落としてない場合の容量)を取得 47 var originalBinary = canvasImage.toDataURL("image/jpeg"); //画質落とさずバイナリ化 48 var originalBlob = base64ToBlob(originalBinary); //オリジナル容量blobデータを取得 49 console.log(originalBlob["size"]); 50 51 //オリジナル容量blobデータをアップロード用blobに設定 52 var uploadBlob = originalBlob; 53 54 //オリジナル容量が2MB以上かチェック 55 if(2000000 <= originalBlob["size"]) { 56 //2MB以下に落とす 57 var capacityRatio = 2000000 / originalBlob["size"]; 58 var processingBinary = canvasImage.toDataURL("image/jpeg", capacityRatio); //画質落としてバイナリ化 59 uploadBlob = base64ToBlob(processingBinary); //画質落としたblobデータをアップロード用blobに設定 60 console.log(capacityRatio); 61 console.log(uploadBlob["size"]); 62 } 63 64 //アップロード用blobをformDataに追加 65 formData.append("selectImage", uploadBlob); 66 } 67 68 //formDataをPOSTで送信 69 $.ajax({ 70 async: false, 71 type: "POST", 72 url: "http://*******.com/image", 73 data: formData, 74 dataType: "text", 75 cache: false, 76 contentType: false, 77 processData: false, 78 error: function (XMLHttpRequest) { 79 console.log(XMLHttpRequest); 80 alert("アップロードに失敗しました"); 81 }, 82 success: function (res) { 83 if(res !== "OK") { 84 console.log(res); 85 alert("アップロードに失敗しました"); 86 } else { 87 alert("アップロードに成功しました"); 88 } 89 } 90 }); 91} 92 93// 引数のBase64の文字列をBlob形式にする 94function base64ToBlob(base64) { 95 var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得 96 data = window.atob(base64Data), // base64形式の文字列をデコード 97 buff = new ArrayBuffer(data.length), 98 arr = new Uint8Array(buff), 99 blob, 100 i, 101 dataLen; 102 // blobの生成 103 for (i = 0, dataLen = data.length; i < dataLen; i++) { 104 arr[i] = data.charCodeAt(i); 105 } 106 blob = new Blob([arr], {type: 'image/jpeg'}); 107 return blob; 108}
php
1//出力用 load.php 2$datas['image'] = '****.blob' 3header("Content-Type: image/jpeg"); 4readfile($datas['image']); 5exit();