How to take photo from camera and its preview in Jquery Mobile ?
Here you will get code for preview of image captured by your device.
<!DOCTYPE html>
<html>
<head>
<title>jQM input file capture</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<style>
#preview {
width: 80%; max-width: 300px;
}
#preview img {
width: 100%;
}
.hiddenfile {
width: 0px;
height: 0px;
overflow: hidden;
}
</style>
<div data-role="header">
<h3>Header</h3>
</div>
<div data-role="content">
<button id="chooseFile">Choose file</button>
<div class="hiddenfile">
<input type="file" data-clear-btn="false" name="image" accept="image/*" capture>
</div>
<div id="preview">
</div>
<ul id="info" data-role="listview" data-inset="true">
</ul>
</div>
</div>
<script>
$('#page').on('pageinit', function(){
$("#chooseFile").click(function(e){
e.preventDefault();
$("input[type=file]").trigger("click");
});
$("input[type=file]").change(function(){
var file = $("input[type=file]")[0].files[0];
$("#preview").empty();
displayAsImage3(file, "preview");
$info = $("#info");
$info.empty();
if (file && file.name) {
$info.append("<li>name:<span>" + file.name + "</span></li>");
}
if (file && file.type) {
$info.append("<li>size:<span>" + file.type + " bytes</span></li>");
}
if (file && file.size) {
$info.append("<li>size:<span>" + file.size + " bytes</span></li>");
}
if (file && file.lastModifiedDate) {
$info.append("<li>lastModifiedDate:<span>" + file.lastModifiedDate + " bytes</span></li>");
}
$info.listview("refresh");
});
});
function displayAsImage3(file, containerid) {
if (typeof FileReader !== "undefined") {
var container = document.getElementById(containerid),
img = document.createElement("img"),
reader;
container.appendChild(img);
reader = new FileReader();
reader.onload = (function (theImg) {
return function (evt) {
theImg.src = evt.target.result;
};
}(img));
reader.readAsDataURL(file);
}
}
</script>
</body>
</html>
Comments
Post a Comment