Skip to content

Instantly share code, notes, and snippets.

@rockymanobi

rockymanobi/capture_image.js

Created December 3, 2014 10:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rockymanobi/81c9afe1784616d01954 to your computer and use it in GitHub Desktop.
Save rockymanobi/81c9afe1784616d01954 to your computer and use it in GitHub Desktop.
Download ZIP
Show Image from HTML5 File API
Raw
capture_image.js
$(document)
.on('change', "#image-file", function() {
if (!this.files.length) {
return;
}
var file = this.files[0];
var $_img = $("#image");
var fileReader = new FileReader();
fileReader.onload = function(event) {
return $_img.attr("src", event.target.result);
};
return fileReader.readAsDataURL(file);
});
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1.0, user-scalable=no">
<title>Sample</title>
<script type="text/javascript" charset="utf-8" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./capture_image.js"></script>
</head>
<body id="">
<input type="file" id="image-file" accept="image/*" capture="camera">
<img src="" id="image">
<script type="text/javascript" charset="utf-8">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment