私はhtml 5 <input type="file" accept="image/*" capture="camera">
を使用して、webappから写真を撮り、phpを使用してデータベースに画像をアップロードすることを検討してきました。これは現在正常に機能しています。
ただし、「写真を撮る」オプションを表示するために見つけることができる唯一の方法は、「ファイルを選択」と呼ばれるボタンを持つテキストフィールドを使用することです。
既存の画像をクリックして写真の撮影オプションを開き、ユーザーが写真を撮影/ファイル選択した後、既存の写真の代わりに新しい画像を表示する方法はありますか?その後、画像を保存してよければ、「アップロード」ボタンをクリックする必要があります。
ここでJSフィドルを参照してください、うまくいけば、これはいくつかの意味があります! http://jsfiddle.net/6dxGY/
これにはJavascript Filereaderを使用する必要があります。 (filereader-apiの概要: http://www.html5rocks.com/en/tutorials/file/dndfiles/ )
ユーザーが画像を選択したら、選択した画像のファイルパスを読み取り、それをHTMLに配置できます。
例:
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
Javascript:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
私はこれが古い質問であることを知っていますが、この同じ問題を解決しようと試みている間にそれを見つけました。私は他のどこにも見つからなかったこのソリューションを共有する価値があると思いました。
基本的には、CSSを使用して<input>
要素を非表示にし、<label>
の周りをボタンのようにスタイルすることです。 [コードスニペットを実行]ボタンをクリックして、結果を確認します。
JavaScriptソリューションを使用したこともありましたが、それでもうまくいきましたが、CSSだけで「プレゼンテーション」の問題を解決できてうれしいです。
label.cameraButton {
display: inline-block;
margin: 1em 0;
/* Styles to make it look like a button */
padding: 0.5em;
border: 2px solid #666;
border-color: #EEE #CCC #CCC #EEE;
background-color: #DDD;
}
/* Look like a clicked/depressed button */
label.cameraButton:active {
border-color: #CCC #EEE #EEE #CCC;
}
/* This is the part that actually hides the 'Choose file' text box for camera inputs */
label.cameraButton input[accept*="camera"] {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Nice image capture button</title>
</head>
<body>
<label class="cameraButton">Take a picture
<input type="file" accept="image/*;capture=camera">
</label>
</body>
</html>
Javascriptクリックイベントを送信することにより、ファイル入力要素をトリガーできます。
<input type="file" ... id="file-input">
$("#file-input").click();
たとえば、これを画像のクリックイベントハンドラーに配置し、CSSでファイル入力を非表示にすることができます。非表示であっても機能します。
その部分が機能したら、入力要素にchange
イベントハンドラーを設定して、ユーザーがファイルをいつ挿入したかを確認できます。このイベントハンドラーは、window.URL.createObjectURL
を使用して、画像の一時的な「blob」URLを作成できます。例:
var file = document.getElementById("file-input").files[0];
var blob_url = window.URL.createObjectURL(file);
そのURLは、ページ上の画像のsrc
として設定できます。 (ただし、そのページでのみ機能します。どこにも保存しないでください。)
現在、すべてのブラウザがカメラキャプチャをサポートしているわけではないことに注意してください。 (実際、ほとんどのデスクトップブラウザーはそうではありません。)ユーザーがファイルを選択するように求められた場合、インターフェイスが依然として意味をなすことを確認してください。
カメラを直接開くために入力ファイルが必要な場合は、次のように入力ファイルにcapture
パラメーターを宣言するだけです。
<input type="file" accept="image/*" capture>