generator-steroids
Version:
A Yeoman generator for Steroids
136 lines (113 loc) • 4.39 kB
HTML
<html>
<head>
<meta charset="utf8">
<title>Cordova Camera Example</title>
<link rel="stylesheet" href="vendor/topcoat/css/topcoat-mobile-light.css" />
<link rel="stylesheet" href="stylesheets/application.css" />
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script>
checkForLocalhost();
// Define our image and spinner elements and latest image URI
var imgElement = null;
var spinner = null;
var latestURI = null;
document.addEventListener("DOMContentLoaded", function(){
imgElement = document.querySelector('#photo');
spinner = document.querySelector('#spinner');
});
function showSpinner() {
spinner.style.display = "block";
imgElement.style.display = "none";
}
function showImage() {
imgElement.style.display = "block";
spinner.style.display = "none";
}
// Show the selected image
function imageURIReceived(imageURI) {
imgElement.src = latestURI = imageURI;
showImage();
}
// Show the Base64-encoded image
function imageDataReceived(imageData) {
imgElement.src = latestURI = "data:image/jpeg;base64," + imageData;
showImage();
}
// Camera failure callback
function cameraError(message) {
navigator.notification.alert('Cordova says: ' + message, null, 'Capturing the photo failed!');
imgElement.src = latestURI;
showImage();
// If no previous image URI exists, hide the image element
if (latestURI == null) {
imgElement.style.display = "none";
}
}
// Choose an image from the device's photo library, the callback receives the image's file URI
function chooseImage() {
checkForLocalhost();
navigator.camera.getPicture(imageURIReceived, cameraError, { quality: 100,
destinationType: navigator.camera.DestinationType.IMAGE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
correctOrientation: true, // Let Cordova correct the picture orientation (WebViews don't read EXIF data properly)
targetWidth: 1000,
popoverOptions: { // iPad camera roll popover position
width : 768,
height : 190,
arrowDir : Camera.PopoverArrowDirection.ARROW_UP
}
});
showSpinner();
}
// Take a photo using the device's camera, the callback receives the image as a Base64-encoded string
function capturePhoto() {
navigator.camera.getPicture(imageURIReceived, cameraError, { quality: 100,
destinationType: navigator.camera.DestinationType.IMAGE_URI,
correctOrientation: true,
targetWidth: 1000
});
showSpinner();
}
// Inform the user that if the project is being served from localhost, the example doesn't function correctly
function checkForLocalhost() {
if (window.location.href.indexOf("http://localhost") == 0) {
navigator.notification.alert("Your project is being served from http://localhost/. Since Cordova's Camera API returns the location of the photo file as a file:// URL, trying to display the photo produces an error (due to the different protocols). Please switch the steroids.config.location property in config/application.coffee to just 'cameraExample.html' to fix this.", null, "You're on localhost!")
}
}
</script>
<style>
img#photo {
width:100%;
}
/* Spinner styles */
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
img#spinner {
width:36px;
-webkit-animation-name: rotate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
margin: auto;
display: none;
}
</style>
</head>
<body>
<div class="content-padded">
<h1>Camera Example</h1>
<hr>
<div class="topcoat-button--cta full center" ontouchend="capturePhoto()">Capture photo</div>
<br><br>
<div class="topcoat-button full center" ontouchend="chooseImage()">Choose from Photo Library</div>
<br><br>
<img id="photo">
<img id="spinner" src="vendor/topcoat/img/spinner2x.png">
</div>
</body>
</html>