8

Is there a possibility that I can use jQuery and Javascript, so that I can open up the camera app on IOS, take a picture, and than save that image into a variable so I could than upload it into parse?

I dislike using this because you have no control of the image.

<input id = "Input" type="file" accept="image/*" capture="camera">

Thanks

Nick Ayoub
  • 83
  • 1
  • 5
  • interesting question. I have used [camera API](https://developer.mozilla.org/en-US/docs/Web/Guide/API/Camera) before on desktops, that company users could simply take a picture of themselves for profiles. (temporary business project). However i'm not sure if this would work with mobile phones. (restrictions) – KarelG Jun 05 '15 at 12:23
  • What do you mean by 'no control'? – George Jun 05 '15 at 12:28
  • Because you can't change the image of the button, you cant change the text, and once you select or take your image, it gives you no control of what to do with the image. – Nick Ayoub Jun 05 '15 at 12:30
  • Is this question related: http://stackoverflow.com/questions/23916566/html5-input-type-file-accept-image-capture-camera-display-as-image-rat ? – George Jun 05 '15 at 12:31

1 Answers1

2

You can use the File API along with a generated, none visible input[type="file"], which will leave you with a File object, which you can then use as binary, or as in the example below, as a base64 url, which you can then pass along to the server.

var btn = document.getElementById('upload-image'),
  uploader = document.createElement('input'),
  image = document.getElementById('img-result');

uploader.type = 'file';

btn.onclick = function() {
  uploader.click();
}

uploader.onchange = function() {
  var reader = new FileReader();
  reader.onload = function(evt) {
    image.src = evt.target.result;
  }
  reader.readAsDataURL(uploader.files[0]);
}
<button id="upload-image">Select Image</button>
<img id="img-result" style="max-width: 200px;" />
Morten Olsen
  • 1,806
  • 14
  • 18
  • 1
    And a link for trying it on device (tested on iOS8 and Android M) http://s.codepen.io/mortenolsendk/debug/eNWyjj? – Morten Olsen Jun 08 '15 at 09:16