Camera API 를 사용하면 디바이스의 카메라를 이용해 사진을 찍어 현재 웹페이지에 업로드하는것이 가능해집니다. This is achieved through an input
element with type="file"
and an accept
attribute to declare that it accepts images. The HTML looks like this:
<input type="file" id="take-picture" accept="image/*">
When users choose to activate this HTML element, they are presented with an option to choose a file, where the device's camera is one of the options. If they select the camera, it goes into picture taking mode. After the picture has been taken, the user is presented with a choice to accept or discard it. If accepted, it gets sent to the <input type="file">
element and its onchange
event is triggered.
Get a reference to the taken picture
With the help of the File API you can then access the taken picture or chosen file:
var takePicture = document.querySelector("#take-picture"); takePicture.onchange = function (event) { // Get a reference to the taken picture or chosen file var files = event.target.files, file; if (files && files.length > 0) { file = files[0]; } };
Presenting the picture in the web page
Once you have a reference to the taken picture (i.e., file), you can then use window.URL.createObjectURL()
to create a URL referencing the picture and setting it as the src
of an image:
// Image reference var showPicture = document.querySelector("#show-picture"); // Create ObjectURL var imgURL = window.URL.createObjectURL(file); // Set img src to ObjectURL showPicture.src = imgURL; // For performance reasons, revoke used ObjectURLs URL.revokeObjectURL(imgURL);
If createObjectURL()
isn't supported, an alternative is to fallback to FileReader
:
// Fallback if createObjectURL is not supported var fileReader = new FileReader(); fileReader.onload = function (event) { showPicture.src = event.target.result; }; fileReader.readAsDataURL(file);
Complete example
If you want to see it in action, take a look at the complete working Camera API example.
Here is the code used for that demo:
HTML page
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Camera API</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="screen"> </head> <body> <div class="container"> <h1>Camera API</h1> <section class="main-content"> <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p> <p> <input type="file" id="take-picture" accept="image/*"> </p> <h2>Preview:</h2> <p> <img src="about:blank" alt="" id="show-picture"> </p> <p id="error"></p> </section> <p class="footer">All the code is available in the <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p> </div> <script src="js/base.js"></script> </body> </html>
JavaScript file
(function () { var takePicture = document.querySelector("#take-picture"), showPicture = document.querySelector("#show-picture"); if (takePicture && showPicture) { // Set events takePicture.onchange = function (event) { // Get a reference to the taken picture or chosen file var files = event.target.files, file; if (files && files.length > 0) { file = files[0]; try { // Create ObjectURL var imgURL = window.URL.createObjectURL(file); // Set img src to ObjectURL showPicture.src = imgURL; // Revoke ObjectURL URL.revokeObjectURL(imgURL); } catch (e) { try { // Fallback if createObjectURL is not supported var fileReader = new FileReader(); fileReader.onload = function (event) { showPicture.src = event.target.result; }; fileReader.readAsDataURL(file); } catch (e) { // var error = document.querySelector("#error"); if (error) { error.innerHTML = "Neither createObjectURL or FileReader are supported"; } } } } }; } })();
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Camera API | No support | No support | No support | No support | No support |
createObjectURL() |
16 | 8.0 (8.0) | 10 | No support | No support |
FileReader |
16 | 3.6 (1.9.2) | 10 | 11.6 | No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Camera API | 3.0 | (Yes) | 10.0 (10.0) | No support | No support | No support |
createObjectURL() |
4 | (Yes) | 10.0 (10.0) | No support | No support | No support |
FileReader |
3 | (Yes) | 10.0 (10.0) | No support | 11.10 | No support |