ローカルから写真を閲覧して撮影するWebアプリケーションを開発しています。また、カメラで画像をキャプチャしたいです。次のコードを使用すると、デバイスのカメラをキャプチャできます。
<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">
ここで、画像とonchangeeventを取得し、base64に変換して、そのページ自体に表示したいです。
親切に助けてください!
次のようにできます:
$('#cameraInput').on('change', function(e){
$data = e.originalEvent.target.files[0];
$reader = new FileReader();
reader.onload = function(evt){
$('#your_img_id').attr('src',evt.target.result);
reader.readAsDataUrl($data);
}});
Miles EricksonとHenock Bongi、reader.readAsDataUrl($ data);を取得する必要があります。 onloadが起動するように、onload関数から。
JQueryを使用したくない場合は、以下を参照してください。
function readFile(file) {
var reader = new FileReader();
reader.onload = readSuccess;
function readSuccess(evt) {
document.getElementById("your_img_id").src = evt.target.result
};
reader.readAsDataURL(file);
}
document.getElementById('cameraInput').onchange = function(e) {
readFile(e.srcElement.files[0]);
};