質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

phpMyAdmin

phpMyAdminはオープンソースで、PHPで書かれたウェブベースのMySQL管理ツールのことです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

3回答

720閲覧

(アップロード容量制限)モバイル端末での画像アップロードについて

kans00229

総合スコア28

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

phpMyAdmin

phpMyAdminはオープンソースで、PHPで書かれたウェブベースのMySQL管理ツールのことです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2017/11/17 03:06

編集2022/01/12 10:55

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();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/11/17 04:11

指定画像を分割せずHTTPアップロードするなら、PCやモバイル関係なくwebサーバー設定上のPOSTサイズ制限に引っかかると思うので、まったく別な方法でやりたい、という意味でしょうか?
kans00229

2017/11/17 04:52

m6u様 返信有難うございます。別の方法もしくは、BLOB型の出力ができればそちらでもよいと考えております。私の知識が浅いため、一般的にどのようにされているのかが検討がつかない状況です。お力をお貸し頂ければと存じます。
guest

回答3

0

モバイル端末等で画像の容量等を圧縮してアップロードする方法

こちらですが、javaScriptで画像容量を削減することが可能です。
ユーザーにとってもサーバーにとってもモバイル端末で通信容量制限が厳しい昨今、通信容量が削減されるのは良いことだと思いますので、アップロード前に画像を小さくすることはメリットが大きいと思います。

下記のURLが参考になるかと思います。
http://matz.hatenablog.jp/entry/2017/03/26/014615

一部抜粋

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>

JavaScript

1function 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}

JavaScript

1function imageUpload() { 2 var form = $("#imageForm").get(0); 3 var formData = new FormData(form); 4 5 //画像処理してformDataに追加 6 if ($("#canvas").length) { 7 //canvasに描画したデータを取得 8 var canvasImage = $("#canvas").get(0); 9 10 //オリジナル容量(画質落としてない場合の容量)を取得 11 var originalBinary = canvasImage.toDataURL("image/jpeg"); //画質落とさずバイナリ化 12 var originalBlob = base64ToBlob(originalBinary); //オリジナル容量blobデータを取得 13 console.log(originalBlob["size"]); 14 15 //オリジナル容量blobデータをアップロード用blobに設定 16 var uploadBlob = originalBlob; 17 18 //オリジナル容量が2MB以上かチェック 19 if(2000000 <= originalBlob["size"]) { 20 //2MB以下に落とす 21 var capacityRatio = 2000000 / originalBlob["size"]; 22 var processingBinary = canvasImage.toDataURL("image/jpeg", capacityRatio); //画質落としてバイナリ化 23 uploadBlob = base64ToBlob(processingBinary); //画質落としたblobデータをアップロード用blobに設定 24 console.log(capacityRatio); 25 console.log(uploadBlob["size"]); 26 } 27 28 //アップロード用blobをformDataに追加 29 formData.append("selectImage", uploadBlob); 30 } 31 32 //formDataをPOSTで送信 33 $.ajax({ 34 async: false, 35 type: "POST", 36 url: "upload.php", 37 data: formData, 38 dataType: "text", 39 cache: false, 40 contentType: false, 41 processData: false, 42 error: function (XMLHttpRequest) { 43 console.log(XMLHttpRequest); 44 alert("アップロードに失敗しました"); 45 }, 46 success: function (res) { 47 if(res !== "OK") { 48 console.log(res); 49 alert("アップロードに失敗しました"); 50 } else { 51 alert("アップロードに成功しました"); 52 } 53 } 54 }); 55} 56 57// 引数のBase64の文字列をBlob形式にする 58function base64ToBlob(base64) { 59 var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得 60 data = window.atob(base64Data), // base64形式の文字列をデコード 61 buff = new ArrayBuffer(data.length), 62 arr = new Uint8Array(buff), 63 blob, 64 i, 65 dataLen; 66 // blobの生成 67 for (i = 0, dataLen = data.length; i < dataLen; i++) { 68 arr[i] = data.charCodeAt(i); 69 } 70 blob = new Blob([arr], {type: 'image/jpeg'}); 71 return blob; 72}

投稿2017/11/17 11:05

mtdsnsk

総合スコア789

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kans00229

2017/11/21 00:56

mtdsnsk様 ご回答有難うございます。私もご紹介頂きましたサイトを参考に、BLOB型で画像を保存するところまではできたのですが、表示の部分が出来なくて困っております。もし、BLOB型で保存したファイルの表示方法をご存知でしたら、ご教授下さいませ。
guest

0

2014年の記事ですが、以前私はこのページを大分参考にさせてもらいました。
https://qiita.com/mpyw/items/117ab6a88fd58d911c34

投稿2017/11/27 14:07

saitouakihiro

総合スコア85

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

投稿2017/11/17 18:09

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kans00229

2017/11/21 01:14

Kosuke_Shibuya様 ご回答有難うございます。最近のモバイル端末のカメラ性能の向上で、一つの画像が10メガを超えるケースがあるので、サーバーにアップロードする前に、画像の容量を抑えたいと考えております。色々調べた際に、BLOB型に変換して容量を削減してアップロードする方法を見つけたのですが、その保存したBLOB型のファイルを展開する方法が、わからないのが現状です。 現状のサイトでは、お教え頂きました方法に近い形で画像を保存して、DBにはファイルパスを保存してGDにて画像を表示しているのですが、モバイル端末での画像アップロードを考えた際に、どうしても容量の壁にあたってしまいます。 現状私が抱えている問題としては、 ■BLOB型のファイルで保存することは出来たが、表示方法がわからない ■画像をファイル保存して、DBに画像パスを保存することはできるが、モバイル端末時にアップロード制限にかかってしまう 実現したいこととしては ■BLOB型で保存したファイルの表示方法をしりたい もしくは ■お教え頂いたような方法で、画像を保存する際に、サーバーにアップロードする前に画像を圧縮したい わかりにくい文章で申し訳ございません。 御手数ではございますが、ご教授頂ければと思います。 宜しくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問