Public domain photo from NASA, modifed with https://flic.kr/p/Ea32T by Andrewb
https://flick.kr/p/3fzVnW by Danny Sullivanb
https://flic.kr/p/5r6RYe by Cristiano Bettab
https://flic.kr/p/54oAAr by James Cridlandb
Watch the demo video at: https://vimeo.com/92208773
Demo: http://girliemac.github.com/sushi-compass
Watch the demo video at: http://sdrv.ms/UF55gM
Taking a photo with using a native camera
<input type="file" accept="image/*">
Camera returns the photo as a file
object
var input = document.querySelector('input[type=file]');
input.addEventListener('change', function() {
var localFile = input.files[0];
var reader = new FileReader();
reader.readAsDataURL(localFile);
reader.onload = function(e){
preview.src = e.target.result;
}
}, false);
Applying filters to the photo
var c = document.createElement('canvas');
var ctx = this.c.getContext('2d');
ctx.drawImage(imgObj, 0, 0);
var imgData = ctx.getImageData(x, y, w, h);
//...Pixel manipulation ...
ctx.putImageData(imgData, 0, 0);
Storing the photos locally
if(window.indexedDB) {
var req = indexedDB.open('coremobCamera');
req.onsuccess = function(e) {
// async
}
}
https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector
Sending a photo
var formData = new FormData();
formData.append('photo', blob);
Photo Gallery Carousel
el.addEventListener('touchstart',
startHandler, false);
el.addEventListener('touchmove'...);
el.addEventListener('touchend'...);
You probably want to include mouse events too (mousedown
, mousemove
, and mouseup
).
For any input devices: touch, mouse, pen...
if (typeof window.PointerEvent != 'undefined') {
el.addEventListener('pointerdown',
startHandler, false);
el.addEventListener('pointermove', ...);
el.addEventListener('pointerup', ...);
}
Touch | Pointer | |
---|---|---|
Chrome 37 | Yes | will implement -> No, they changed mind |
Opera 22 | Yes | No |
Firefox 26 | Yes | No |
IE 10 | No | Yes |
IE 11.next | Yes | Yes |
Safari 7 | Yes | No |
Android 4.4 | Yes | No |
caniuse.com • groups.google.com/a/chromium.org
https://flic.kr/p/8tuc1u by randomliteraturecouncilb