Twitter: raymondcamden


Address: Lafayette, LA, USA

Capturing camera/picture data without PhoneGap

05-20-2013 74,563 views JavaScript, HTML5 197 Comments

As people know, I'm a huge fan of PhoneGap and what it allows me to do with JavaScript, HTML, and CSS. But I think it is crucial to remember that you don't always need PhoneGap. A great example of that is camera access. Did you know that recent mobile browsers support accessing the camera directly from HTML and JavaScript? Let's look at an example.

Over a year ago I wrote a blog post in which I created an application called "Color Thief." This application made use of PhoneGap's Camera API and a third party JavaScript library called Color Thief. I loved this example because it demonstrated how you could combine the extra power that PhoneGap provides along with existing JavaScript libraries.

This morning I watched an excellent Google IO presentation (https://www.youtube.com/watch?v=EPYnGFEcis4&feature=youtube_gdata_player) on Mobile HTML. It was an overview of some of the exciting stuff you can now do with mobile HTML and JavaScript. To be clear, this was all without using wrappers like PhoneGap.

In one of the examples the presenters discussed the new "capture" support for the input/file field type. This is rather simple to implement:

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

If supported (recent Android and latest iOS), the user can then use their camera to select a picture. I decided to rebuild my old demo to skip PhoneGap completely and just make use of this feature. Here's the code:

For the most part, this is pretty similar to the last version. I no longer wait for the deviceready event, but instead just listen for the document itself to load. Instead of listening for a button click, I've switched to an input field using type=file. I now listen for the change event, and on that, I see if I have access to a file. If I do, I can then use the URL object to create a pointer to the source and then simply add it to my DOM. After that, Color Thief takes over.

The only tricky part I ran into was that in iOS the URL object is still prefixed. You can see how I get around that in the startup code. To be fair, this isn't 100% backwards compatible, I could add a few checks in here to ensure that things will work and gracefully let people on older phones know they can't use this feature.

But the end result is nearly the exact same functionality in a web page - no PhoneGap, no native code.

197 Comments

  • Tarek #
    Commented on 05-20-2013 at 11:38 AM
    when i scan QR the app, Adobe phonegap build is openning on ios6 but the application is not installed.
  • Commented on 05-20-2013 at 12:53 PM
    What are you talking about? This is not a PhoneGap application.
  • Anas #
    Commented on 05-21-2013 at 12:36 AM
    Good Article
    Thanks :)
  • Tarek #
    Commented on 05-21-2013 at 5:12 AM
    cheers !!
  • tim #
    Commented on 05-21-2013 at 2:47 PM
    Tried this on my android phone running 4.2.1, didn't work, just went to the usual select a file dialog. Do you have a video of it working on android?
  • Commented on 05-21-2013 at 2:59 PM
    I just tried with an Android emulator using 4.1.2 and it worked. Does your device have a camera?
  • tim #
    Commented on 05-21-2013 at 3:17 PM
    K, so I tried viewing the same code in chrome (non-stock browser) and it works. The problem is that there is no way to change which browser handles the webview in phonegap so I am stuck with the stock browser which has yet to support this feature :(
  • Commented on 05-21-2013 at 3:22 PM
    Well to be clear, this whole blog post is about not using PhoneGap. You get that, right?
  • tim #
    Commented on 05-21-2013 at 3:30 PM
    I get that but technically I wasn't using phonegap, non of the api's at least. It would be the equivalent of just using android's stock browser and browsing to the html since the webview is the same thing. I am wondering if 4.2 supports this in its stock browser.
  • Commented on 05-21-2013 at 3:52 PM
    I'd imagine the stock browser is not going to add anything. In fact,it shouldn't. It should just die probably. Mobile Chrome is the future.
  • John Brown #
    Commented on 05-21-2013 at 5:42 PM
    Thanks. I actually have been meaning to research this ever since I noticed that I could access my mobile photos via Wordpress on my mobile device. I was like cool!

    How about video captured from your mobile device? Possible?
  • Commented on 05-21-2013 at 9:48 PM
    If you watch the video I linked to (it is short, 40 minutes), they show an example using getUserMedia. Different API, bit less support, but where it does work, it is pretty darn easy. (I've blogged on it before.)
  • Andrew #
    Commented on 05-22-2013 at 5:56 AM
    I would love to be able to record audio this way. Is this or will this be possible?
  • Commented on 05-22-2013 at 6:10 AM
    According to spec, yes:

    http://www.w3.org/TR/html-media-capture/

    ctrl-f for audio and you will see an example. I haven't tested this yet though. You should be able to get access to the binary bits which you could them store someplace (remember that XHR2 lets you upload files via AJAX).
  • Commented on 05-22-2013 at 6:16 AM
    Also know that getUserMedia can do this. It is a different spec.
  • Commented on 05-22-2013 at 6:25 AM
    I did a quick test w/ accept="audio/*" and it worked on my Android simulator, but not the iOS Simulator. However, the failure on iOS may be more the simulator then iOS. I'll test with my iPhone a bit later.
  • Andrew #
    Commented on 05-22-2013 at 7:28 AM
    Thanks. I don't suppose there is any way of saving locally on the phone (e.g. if there is no network connection)?
  • Commented on 05-22-2013 at 10:48 AM
    Unfortunately, file system access is only enabled in PhoneGap. In theory, one day, mobile devices will support IndexedDB, which allows you to store binary bits as well. That would be a way to store the value.
  • John Brown #
    Commented on 05-22-2013 at 2:06 PM
    Thanks. Will watch the video. Starting to browse your older posts. Great stuff.
  • Commented on 05-24-2013 at 12:04 PM
    you can save images offline already in all browsers via WebSQL, falling back into IndexedDB, falling back into localStorage.

    The trick is to create a canvas, draw the image file on it, and use canvas.toDataURL() to obtain the base64 string you can save or reuse whenever you want.

    To dig more into this possibilities without PhoneGap, I've experimented with camera too ending up falling back into animated gifs created on the fly to simulate a vine app for web.

    http://webreflection.blogspot.com/2013/02/the-diff...
  • Commented on 05-29-2013 at 2:21 PM
    Works on my Nexus and iPhone in Chrome mobile... Crome mobile is the future!
  • Commented on 06-12-2013 at 1:25 PM
    As always Ray, very well done and very helpful.
  • Hazel Planchart #
    Commented on 06-13-2013 at 1:23 PM
    It works on the iPad but it never renders the captured picture.

    It only shows the thumbnail on the top of the page.

    It doesn't work on several Android phones and tablets that I tried it on; all have cameras.

    Testing on iPhone 5 ...
  • Commented on 06-13-2013 at 1:30 PM
    Hazel, it could be a number of things. Lets focus on iPad. Can you please try the remote debugger via Safari and tell me what you see?
  • Commented on 06-13-2013 at 1:36 PM
    I just tested in my iPad and it worked fine. Try this URL. Maybe you forgot something when you tried my code.

    http://www.raymondcamden.com/demos/2013/jun/13/col...
  • Hazel Planchart #
    Commented on 06-13-2013 at 1:43 PM
    Your site works!

    I simply copied the HTML code and pasted it in a file to test at the web server.

    It does everything except rendering the big picture and filling in the color scheme below.

    Thanks!
  • Hazel Planchart #
    Commented on 06-13-2013 at 1:48 PM
    I'm missing the scripts. That's the reason. :(
  • Commented on 06-13-2013 at 2:00 PM
    So... I'm confused. Is it working for you now?
  • Hazel Planchart #
    Commented on 06-13-2013 at 3:33 PM
    After I placed the js scripts it works perfect.

    I was misled by the over-simplicity.

    Thanks!
  • Don Stewart #
    Commented on 06-16-2013 at 7:29 PM
    I want to capture video from iPad using a browser without downloading an app.
    Your article says this works on latest iOS.
    I am using iPad with os 6.1.3 (just updated) and I cannot get it to work.
    Does anyone have a link to a sample that does work. The end goal is to build a cross platform video chat / desktop sharing website with absolute minimum setup for the end users.
  • Commented on 06-16-2013 at 7:32 PM
    I don't believe I said it works in video - just pictures. You want to look at WebRTC for video. Not sure if it is supported on iPad yet though. (caniuse.com is failing me.)
  • Don Stewart #
    Commented on 06-16-2013 at 8:31 PM
    Ahh yes... Sorry, I had "webcam access" on the mind. It's always dangerous to combine rushed reading with too much wishful thinking. Even still, this is a step forward, do you have a link to a working example of this? Thanks for the quick reply btw..
  • Olivier #
    Commented on 06-16-2013 at 9:51 PM
    Really Exciting!
    I am Working on a Phonegap/Jquery Mobile app that would requiers a custom camera overlay. Since it appears quite complicated to write a complete phonegap plugin to do so, i am exploring using this technique. However, Do you know if it is possible to get to the camera stream directly in the Html, without opening the camera UI like in your example? Thank you and great work.
  • Olivier #
    Commented on 06-16-2013 at 9:56 PM
    Might be answering my own question here ;)
    It looks like that would requiers using the getUserMedia/Stream API which is not yet available on mobile device.
  • Commented on 06-17-2013 at 7:13 AM
    Found the right caniuse search term:

    http://caniuse.com/#feat=stream
  • Commented on 06-17-2013 at 10:25 AM
    Actually, looking at this:

    http://mobile.dzone.com/articles/new-iphone-5-and-...

    They show support for video, but, I believe it is just as a file. WIll test after my presentation in a bit. This would still give you (if it works) the ability to upload a video, you just couldn't stream it.
  • Commented on 06-17-2013 at 1:51 PM
    So - video does work. It just gets attached to the input file field and - in theory - should be available if you POST the form (or use XHR).

    In theory.
  • akeem #
    Commented on 06-24-2013 at 4:19 AM
    @Raymond: it works also with videos (iphone + htc android), i just tested it. the problem then remains the different video-codecs of the files uploaded ;) i suppose one has to process them all with ffmpg server-side to have useful user-input...
  • Commented on 06-24-2013 at 5:11 AM
    You could use something like ZenCoder to handle processing the input.
  • akeem #
    Commented on 06-24-2013 at 5:39 AM
    Shure ZenCoder is one option (ffmpeg is free), although this is not the place to talk about that - it's simply fantastic that this access to the camera works. Thanks for your post - great work!!
  • Steph #
    Commented on 06-25-2013 at 9:13 AM
    Hi,

    Working on Android 4.2.2 but when taking a picture, orientation is bad... there is only one position on the phone that take a picture on the good orientation, all others take it 90° or 180° wrong... any way to make sure the picture is ok?
  • Commented on 06-25-2013 at 10:23 AM
    Once you set the DOM img tag to the source of the new image, you could check the H/W properties and try to determine orientation there. But no - that won't work because I may be taking a landscape picture.

    You can - in theory - read the EXIF data using JavaScript. That contains orientation data.
  • Steph #
    Commented on 06-25-2013 at 1:21 PM
    Ok I'll try to find a script to read the orientation... And an other to rotate :-(
    And is there a way to upload the photo to the server then?
    Thanks
  • Steph #
    Commented on 06-26-2013 at 6:51 AM
    I have big difficulties to convert the format img src=blob:into file to upload :-((
  • Commented on 06-26-2013 at 8:17 AM
    Steph - why do you need to convert it? If you submit the form it should just upload, right?
  • Steph #
    Commented on 06-26-2013 at 8:24 AM
    No... It uploads the texte blob:http://xxxxx/fdsfdsf-dsf-sdfsdf and I don't know what do to with that stuff...
  • Commented on 06-26-2013 at 8:27 AM
    Odd - well - I'll test - but I'm on the road so it may be a day or two.
  • Steph #
    Commented on 06-26-2013 at 8:28 AM
    Cool! Thanks
  • Commented on 06-26-2013 at 10:55 AM
    So I just tested and it worked for me. But note - don't forget to give your file input field a name. My example above just uses an ID. You also need a proper form tag too.
  • Steph #
    Commented on 06-26-2013 at 10:57 AM
    Can't get it work... Could you post the code you user to get it please?
  • Commented on 06-26-2013 at 10:58 AM
    To be clear, I added this:

    <form enctype="multipart/form-data" method="post">

    and changed my file input field:

    <input type="file" capture="camera" accept="image/*" id="takePictureField" name="filetest">

    added a submit button - and that was it. I tested on my ColdFusion server where I just dumped out the form fields. The file was uploaded successfully.
  • Steph #
    Commented on 06-26-2013 at 10:59 AM
    Yes, ok, but on the server side?
  • Steph #
    Commented on 06-26-2013 at 11:02 AM
    Did you dump file string (blob:xxxxxx)? Or the file itself? Because I'm ok to upload file string, but after I don't know how to manage it to make a real image file...
  • Commented on 06-26-2013 at 11:03 AM
    Let me confirm the file really really uploaded.
  • Commented on 06-26-2013 at 11:07 AM
    I have confirmed. The file uploaded fine to my CF server.
  • Steph #
    Commented on 06-26-2013 at 11:08 AM
    Could you post the whole code here please?
  • Steph #
    Commented on 06-26-2013 at 11:09 AM
    Oh, sorry, perhaps an important thing: I'm trying to upload via jquery/ajax not a simple html form...
  • Commented on 06-26-2013 at 11:16 AM
    Ah - don't forget that "regular" AJAX can't do file uploads. XHR2 can, and frankly, has even better support then what I used here. Just hit up html5rocks.com - they have a few blogs posts on XHR2.
  • Steph #
    Commented on 06-26-2013 at 11:18 AM
    And With the use of canvas.toDataURL it is possible? Cause I can get the picture from the base64 encoding url...
  • Commented on 06-26-2013 at 11:19 AM
    You don't need to do this though. Again, check out the XHR2 stuff.
  • Steph #
    Commented on 06-26-2013 at 12:04 PM
    Can't find a solution with xhr2 too... :-(
  • Commented on 06-26-2013 at 2:28 PM
    Sorry, what do you mean? You can find the link? Try: http://www.html5rocks.com/en/tutorials/file/xhr2/
  • Steph #
    Commented on 06-26-2013 at 3:03 PM
    Yes, I found it, but I don't understand anything, it's too complicated for me... I've tryeid several solutions and couldn't get anything from...
  • Commented on 06-26-2013 at 4:41 PM
    Ah, are you new to JavaScript? Trying to understand where the breakdown is.
  • Steph #
    Commented on 06-26-2013 at 5:08 PM
    Yes, I'm new...
  • Commented on 06-26-2013 at 6:26 PM
    Well, best I can recommend is to at least give it a try. I can't write the code for you. Consider this an opportunity to learn. :)
  • Arcayne #
    Commented on 07-09-2013 at 5:10 PM
    Hi Raymond,

    Thanks for this info, I am trying to use it together with parse.com but I came into some issues there, I saw in the past you were interested on using PG and parse.com for uploading images but wasn't really the easiest choice.

    Anyway here it is my issue that hopefully is interesting for you:

    http://stackoverflow.com/questions/17518375/typeer...
  • Commented on 07-10-2013 at 6:15 AM
    Fascinating. I wasn't aware their API had been updated to support this. I see it isn't working for you. I'll try and see if I can get my own demo to work.
  • mark #
    Commented on 07-10-2013 at 6:29 AM
    On safari on ios 6.0, the capture attribute is ignored. Good article though
  • Commented on 07-10-2013 at 6:41 AM
    Eh? I used iOS6 in my video above.
  • Commented on 07-10-2013 at 7:49 AM
    As an FYI Arcayne, you may want to post your question to the Parse forum instead of SO, may get a quicker response.
  • Arcayne #
    Commented on 07-10-2013 at 8:06 AM
    Make sense - https://www.parse.com/questions/typeerror-cannot-c... -

    BTW thanks for your great blog!
  • Commented on 07-10-2013 at 8:12 AM
    By the way - I just did a test and it worked fine as is. Here is my code (minus the real IDs). Note the html is just a file field and a button.

    https://gist.github.com/cfjedimaster/5966264
  • Commented on 07-10-2013 at 5:20 PM
    As just an FYI, I was able to make it work with PhoneGap just fine.
  • Commented on 07-10-2013 at 6:12 PM
    FYI: http://www.raymondcamden.com/index.cfm/2013/7/10/Q...
  • Wilfo Derek #
    Commented on 07-14-2013 at 3:50 PM
    Good work Raymond.I am trying to do it the same but with my android camera but get a mistake.

    Does your project work for android capturing video on realtime?
    logica_razon@hotmail.com

    It's urgent...Thanks in advance.
  • Commented on 07-14-2013 at 4:36 PM
    Just pictures - not video afaik.
  • muhaimin cs #
    Commented on 07-21-2013 at 1:41 PM
    do u have any idea for snap a photo offline and when the internet is available, it will upload to the server..thanks
  • Commented on 07-21-2013 at 3:14 PM
    Well, the first part 'snap a photo' is already covered. As for knowing the Internet is available, try listening for the offline/online events. See here for more info:

    https://developer.mozilla.org/en-US/docs/Onlineandoffline_events
  • muhaimin cs #
    Commented on 07-21-2013 at 7:54 PM
    what i mean was how do i store the photo on cache/localStorage and later upload when the connection is ready. I dont know where to put the photo while mobile is offline. My targeted device is ipad mini

    thanks ramden
  • Commented on 07-21-2013 at 7:56 PM
    If the web page is open, you don't have to store it per se - the file is still selected and you have access to it and can POST the form. Otherwise - not sure what to suggest. If you can convert to Base64 you can store it in WebSQL or localStorage.
  • muhaimin cs #
    Commented on 07-22-2013 at 3:34 AM
    consider if the page will be closed and what ever user input will upload when the connection is ready. The example you've shown here (http://www.raymondcamden.com/index.cfm/2012/9/14/E...) is pretty close to what i mean. but only photo support i curious to put it where
  • Commented on 07-22-2013 at 6:40 AM
    Then you would need to do what I suggested - converting it to base64 and storing it in WebSQL or localStorage.
  • muhaimin cs #
    Commented on 07-23-2013 at 2:25 AM
    is there any sample around this blog?
  • muhaimin cs #
    Commented on 07-23-2013 at 2:39 AM
    and associate it with content of user input
  • Commented on 07-23-2013 at 6:13 AM
    Here is the demo: http://www.raymondcamden.com/demos/2013/jun/13/col...
  • greg baker #
    Commented on 07-28-2013 at 9:09 AM
    Thank you for your blog and this post. The time that you take to help others, like myself, is greatly appreciated.

    greg
  • Jasper Grannetia #
    Commented on 08-02-2013 at 9:35 AM
    Hi Ramond,

    Do you have any pointers as to how to POST the images that are shot using this code? I Googled around a bit and learned quite a bit on object URLs, but that only leads me to suspect that there are no methods for turning these blob into anything that could be posted. Maybe this is because of security considerations?

    Hope you can help me out (again :-D)!

    Thnx in advance,

    Jasper
  • Commented on 08-02-2013 at 12:49 PM
    Jasper: It just works. When you submit the form the image is attached just like any other form upload. As to how you handle it, it depends on your application server.
  • Jasper Grannetia #
    Commented on 08-02-2013 at 12:57 PM
    I tried posting the form I enclosed the file field in to CF10 and I cfdumped the form-scope, which did not contain a file field like I expected.

    But if you say so, I'll have another look. :-)

    Thnx, I will post back on my results.

    Jasper
  • Commented on 08-02-2013 at 12:58 PM
    You need to ensure you add a name to the form field. My demo didn't need it, but you have to add it.
  • Jasper Grannetia #
    Commented on 08-02-2013 at 3:39 PM
    Hi,

    Turns out it works just fine like you said. My problem was that I was working in a JQM site, which does things asynchonously, obviously (well, it's obvious now :-D)...

    I'll work around the that somehow and enjoy this wonderful new feature. Thnx for pointing it out.

    CU :-)

    Jasper
  • Commented on 08-02-2013 at 3:46 PM
    Don't forget you can disable that in JQM pretty easily - either at the tag level for one form or globally. Also note that modern browsers, especially the ones that support this, also support XHR2, which allows for form uploads over AJAX. (Although it would still break in JQM as by default it would not be using that.)
  • Matej Petek #
    Commented on 08-23-2013 at 1:45 PM
    Great work!
    This question is a little off topic but maybe you will know.
    Is it possible to stream video directly from camera to DIV (or form). It will work like display on camera, capturing from back camera and show this in DIV?
    Same functionality as photo app without recording images or video.
  • Commented on 08-23-2013 at 1:57 PM
    Nope, not yet. (At least not as far as I know.)
  • mahima #
    Commented on 09-08-2013 at 2:54 AM
    is it that we should work on webView to implement this code?
  • Commented on 09-08-2013 at 6:56 AM
    @Mahima: No idea what you mean. This works in the web browser on the mobile device.
  • mahima #
    Commented on 09-09-2013 at 3:23 AM
    I have been developing the android app using webview.is your code applicable in webview of android?
  • Commented on 09-09-2013 at 5:25 AM
    As the post says, it is supported in recent Android - so if the Android version supports it, then it should work.
  • Danilo #
    Commented on 09-11-2013 at 3:36 PM
    How do I get the picture that was taken? it doesn't return anything for me...
  • Commented on 09-11-2013 at 4:22 PM
    Are you on an older Android perhaps? Or older iOS? Obviously the support isn't 100%. You can write code to check for this and provide a message so that folks (like you) at least know why they can't use this particular feature.
  • Jake #
    Commented on 09-12-2013 at 9:49 PM
    How can I take a picture and upload it to my server? Sorry I didn't understand very well...I'm able to take the picture but how can I have access to this picture on my site...I would like to store it. I'm using an ipad 2.

    Thanks for the help!
  • Jake #
    Commented on 09-12-2013 at 9:53 PM
    I added a submit button like you said but the "get" comes empty... $_FILES["picturename"] it comes back empty so I cant upload it any tips please? =/
  • Commented on 09-13-2013 at 9:20 AM
    I don't know PHP, but you should wrap my input field above with a form tag and ensure you use the right enctype for form uploads.
  • Chris Lo #
    Commented on 09-27-2013 at 8:01 AM
    Won't work on chrome on my Sony Xpedia z. It says failed to open file with the default camera app.

    Works on Firefox tho?

    Any ideas?
  • Commented on 09-27-2013 at 8:02 AM
    Sorry - no idea. Android browser?
  • Alina #
    Commented on 09-28-2013 at 6:14 PM
    That was SOOOOO helpful. Thanks!
  • Ravi Kumar #
    Commented on 10-03-2013 at 1:06 PM
    Hi,

    I am developing an application and one requirement is that user can capture a new photo from camera or select existing photo from gallery. i am using html5 tag <input id="a-imagery-image" type="file" accept="image/*;capture=camera" style="display:none" multiple>.

    the problem is when i opened in the iPad, its only giving option to select from gallery only. its not showing options like "take photo", "choose existing", "cancel" options.

    i have tried in both chrome and safari.

    iPad Details:
    version: 7.0.2(11A501)
    Model: MD371LL/A

    Could you please help me in this issue

    Thanks in advance.

    Best Regards,
    Ravi Kumar
  • Commented on 10-03-2013 at 2:53 PM
    What happens when you remove display:none?
  • Ravi Kumar #
    Commented on 10-03-2013 at 2:57 PM
    Hey Raymond,

    I found out the issue. when i remove the "multiple" option from the input tag its working normally.

    Con't we select multiple files at a time in iPad?

    Thanks for the response.
  • Commented on 10-03-2013 at 3:01 PM
    I'm guessing no. Or it only allows for existing pics when multiple is true.
  • Alina #
    Commented on 10-06-2013 at 8:11 PM
    Hi,
    the code doesn´t work for me :-(. I saved it to an HTML file and made sure the paths to the js-files are correct.

    I get the following error:
    ReferenceError: createPalette is not defined
    var colorArr = createPalette($("#yourimage"), 5);

    Please help!
  • Commented on 10-06-2013 at 8:12 PM
    It sounds like you didn't get the path right for quantize or color-theif. I'd double check those.
  • Alina #
    Commented on 10-06-2013 at 8:28 PM
    Yes, I figuered. But even when I go though the quantize or color-theif code I can´t find any createPalette ?!
  • Commented on 10-06-2013 at 8:39 PM
    It looks like his library was updated and the API changed. I believe it is getPalette now, not createPalette.
  • Alina #
    Commented on 10-06-2013 at 9:10 PM
    That´s a good point but unfortunately it still doesn´t solve my problem.
    According to color thief I should use
    getPalette(sourceImage[, colorCount, quality]
    So in this case:
    getPalette($("#yourimage"), 5,0); ?!

    Still undefined!
  • Commented on 10-06-2013 at 9:30 PM
    If you have the latest JS and it still isn't working, then I'd check to ensure you didn't mess up the script src. This would be easier if it were online where I could see it.
  • Alina #
    Commented on 10-07-2013 at 12:08 AM
    There it is:
    https://github.com/alina-fi/Test
  • Commented on 10-07-2013 at 5:13 AM
    I believe you want ColorTheif.getPalette.
  • Commented on 10-07-2013 at 5:15 AM
    Actually no - follow the lead you see here: https://github.com/lokesh/color-thief.

    ex:
    var colorThief = new ColorThief();
    colorThief.getPalette(sourceImage, 8);
  • Alina #
    Commented on 10-07-2013 at 12:34 PM
    No, I just don´t get it, sorry. Nothing works.
    Is there any possibility you can post the old API with the code to make it work?
  • Commented on 10-07-2013 at 12:47 PM
    I don't have the time right now to rebuild it. I'll try sometime later, but no promises.
  • Commented on 10-08-2013 at 10:58 AM
    Please see this HTML:

    https://gist.github.com/cfjedimaster/6887207

    There are two changes. First, you only need the color thief JS file, not the quantize one.

    Second, lines 63-64 were modified to use the new API. I've confirmed it works for me.
  • Alina #
    Commented on 10-08-2013 at 1:32 PM
    You are awesome!Thanks so much! I just forgot to put the square brackets.
  • Sukant #
    Commented on 10-14-2013 at 5:14 AM
    Can it work on desktop?
  • Commented on 10-14-2013 at 5:41 AM
    What happened when you tried? :)

    So - the spec here (http://dev.w3.org/2009/dap/camera/), is not covered at CanIUse.com. HTML5 Rocks has this listed for support (source http://www.html5rocks.com/en/tutorials/getusermedi...):

    Android 3.0 browser - one of the first implementations. Check out this video to see it in action.
    Chrome for Android (0.16)
    Firefox Mobile 10.0
    iOS6 Safari and Chrome (partial support)

    So desktop looks a bit poor. I'd probably just WebRTC there instead.
  • Commented on 11-06-2013 at 5:34 AM
    I didn't know this capture attribute, it's good. But since a simple input file doesn't work on Windows phone it can't be an entire multiplateform solution.

    I think we have to use phonegap File API to make a picture upload works on Windows Phone, but maybe you know another solution without phonegap ?

    Thank you
  • Commented on 11-06-2013 at 6:55 AM
    To be clear, Thomas, I didn't necessarily mean to imply that this would work as much as PG. I just wanted to point out that - at least eventually - PG wouldn't be needed for some of the things it does now. And that's a good thing. :)
  • Commented on 11-06-2013 at 7:11 AM
    I agree with you, I'm not a huge fan of phone gap, I use to develop mobile apps with the strict minimum of Phone gap stuffs.

    It's not your solution that I criticize, it's rather Windows phone to not support input file. They are late ... as usual. By the way a nice link about input file support (2012, but I think it's not moving fast ...) : http://viljamis.com/blog/2012/file-upload-support-...
  • Commented on 11-06-2013 at 9:11 AM
    I love what Microsoft is doing designwise on mobile. I almost considered a Surface tablet. But - yeah - HTML5 support can be spotty on mobile.
  • imal #
    Commented on 11-28-2013 at 9:18 AM
    Hey Raymond, first of all thank you very much for this great post, it works perfectly on mobile browsers. but i'm having a little question i hope you can guide me, i wrote an application using your script + jquery mobile and it works perfectly in android and iphone as a mobile webpage but i wanted it to build as a mobile application, so i used http://seattleclouds.com/ to build for iphone and android and after building it works for iphone but not for android, nothing happens in android what can be the possible problem for this

    i found that android webview is not supporting html5 unless you have activate it is that the problem

    Thank you for your time
    imal
  • Commented on 11-28-2013 at 1:02 PM
    Sorry, but as I don't use Seattleclouds, I can't really say. I'd suggest checking any debug options you may have with that platform. Or see if you can use Weinre with it.
  • imal #
    Commented on 11-28-2013 at 1:22 PM
    Thank you for the reply, did you tried building the above script to an apk? if you have, can you tell me was it success, so that i know i'm doing something wrong!
  • Commented on 11-28-2013 at 1:33 PM
    Since the point of this was about non PhoneGap apps, no, I didn't. :) If I were using PhoneGap, I'd probably just use the Camera API as is.
  • Kevin Yilmaz #
    Commented on 12-02-2013 at 7:23 PM
    Hi Raymond,
    Sorry, where and how can I get the color-thief.js file?

    (By the way: "you must enter a valid url" that's what I got when I entered www.husnu.me in 'Website' input field.)
  • Commented on 12-03-2013 at 7:54 AM
    Color Thief: http://lokeshdhakar.com/projects/color-thief/. I linked to it in the blog post.

    As for the URL, it was being anal and wanted http:// in front.
  • Commented on 12-03-2013 at 11:32 AM
    Thank you Raymond.
  • Ruben #
    Commented on 12-04-2013 at 6:20 AM
    Hi Raymon, do you know, how can I send a image picked from ipad roll, this way, to my server? I need create a database with they.

    Regards.
  • Commented on 12-04-2013 at 7:04 AM
    Just use the same HTML you would for a normal file upload. The right enctype for your form tag should be all that is required.
  • Ruben #
    Commented on 12-04-2013 at 8:15 AM
    Great Raymon, thx for help me.
  • Oscar #
    Commented on 02-20-2014 at 8:35 PM
    Hi Raymond, I came across this page and I am amazed at how you were able to access the camera on the device through an HTML page. Have you thought of or coded anything for reading a barcode throught the camera and then taking the barcode data and displaying the contents in a field?

    very impressed

    Oscar
  • Commented on 02-21-2014 at 7:06 AM
    No, I have not, but in theory, it is possible: http://badassjs.com/post/654334959/barcode-scannin...
  • Commented on 03-05-2014 at 1:18 AM
    I love you man
  • AJAY AVHAD #
    Commented on 03-14-2014 at 12:26 PM
    How record video in phone-gap in background?
  • Commented on 03-14-2014 at 12:48 PM
    See the docs on the Capture API.
  • AJAY AVHAD #
    Commented on 03-15-2014 at 12:57 AM
    I have done video recoding but i want in backgroud ?
  • Commented on 03-15-2014 at 8:02 AM
    You want to capture video in the background? Not sure how that would work - sorry.
  • Meek #
    Commented on 03-19-2014 at 10:45 AM
    Hey Raymond,

    I need to use the take photos' API , your illustration is very clear and helpful to me.

    It's surprise me that HTML 5 could use take photo function without using phonegap!

    My APP will be successful by your help!

    Very Thanks!
  • Anand #
    Commented on 03-20-2014 at 1:19 AM
    Nice Article. I need (Take Photo) option alone. No need of (choose existing) option..How I can do this? Thanks
  • Commented on 03-20-2014 at 6:11 AM
    I don't believe you can change that.
  • Ofir #
    Commented on 03-23-2014 at 6:02 PM
    Hi, I was wondering if there is a QR code reader implementation of this for mobile devices (iOS specifically, but all mobile browsers preferably).

    In case there isn't, then I presume the only way to implement one is take a picture and upload it like in the demo, then analyze the picture.

    q.
    1. does the picture get uploaded to the server, or is it stored on the client?
    2. could it be analyzed by the client, or would it have to be uploaded and analyzed by the server?
  • Commented on 03-23-2014 at 8:26 PM
    I'm not aware of any client-side only JS QR decoder, but it may exist.

    1) "does the picture get uploaded to the server, or is it stored on the client"
    It isn't sent to the server until you submit the form.

    2) See my first thing - I'm not aware of a QR reader built in JS, but it may exist.

    Oh wait - this may be it: https://github.com/LazarSoft/jsqrcode
  • Anand #
    Commented on 04-03-2014 at 5:19 AM
    Hi..
    Is it possible to find that the user use 'choose existing' option rather than 'take picture' ?
  • Commented on 04-03-2014 at 5:29 AM
    As far as I know, no. Maybe you could try to read the file's creation date and see if it is "too young" to be an existing picture, but that seems risky.
  • Anand #
    Commented on 04-03-2014 at 6:14 AM
    If the date is young that will be not be the problem. Do you know how to read the file's creation date? Because I have tried using JavaScript in many way. Please share if any.

    Thanks
  • Commented on 04-03-2014 at 8:51 AM
    Oh sorry - I was thinking about this in terms of PhoneGap/Cordova where you have access to the file system. So - I think the answer is just no.
  • Zim #
    Commented on 04-25-2014 at 7:13 AM
    Hi Raymond, you say you can store in WebSQL once you have converted to base64 format (in one of your earlier comments). I'm having a lot of trouble with retrieving and displaying the image after storing. Any pointers?
  • Commented on 04-25-2014 at 9:56 AM
    Well I said "if" you can. ;) You say you have issues retrieving/displaying after storing. So lets focus on retrieving. You knew WebSQL enough to do an insert, but not how to get the value back?
  • Zim #
    Commented on 04-25-2014 at 10:05 AM
    I know how to retrieve simple text or number values using the SELECT statement, but in this case I can't just do image.val() to retrieve the image, because that wouldn't return anything most likely. Usually I would do something like $('#something').val(row['column1']); to put the value from the database into #something. Basically I can't get my head round the format
  • Commented on 04-25-2014 at 10:06 AM
    Wait - you said you stored it - but now you are saying you didn't store it? So you don't have a way to convert the image to base64 then, right? Try this - first result via Google search:

    http://stackoverflow.com/questions/6150289/how-to-...
  • Zim #
    Commented on 04-25-2014 at 10:23 AM
    I should have mentioned before I'm using PhoneGap API to take a picture using the device camera. I'm then using this code:

    function onSuccess(imageData) {
    var image = document.getElementById('camera');
    image.src = "data:image/jpeg;base64," + imageData;
    displayImage(image.src);
    }

    Does that convert it to base64? Or am I misunderstanding the documentation. I am then just inserting the image variable into the database conventionally
  • Commented on 04-25-2014 at 10:29 AM
    @Zim: You do know this entire post is about doing it without PhoneGap, right? The fact that you were using it is kind of an important detail, and we are now somewhat off topic.

    That being said: You have the base64 string already. It is "imageData". You can store that easily enough in WebSQL. Please see the documentation on how to work with it.

    Since you are using PG though, you can also write to the file system and store binary data. You would need to change from base64 image data to file names though. See the PhoneGap Camera API docs.
  • Zim #
    Commented on 04-26-2014 at 5:01 AM
    I'm not sure about the capacity of WebSQL on an iOS PhoneGap app. In some places I'm reading it's 5MB, in others I'm reading it's 50MB. Would it be wise to store base64 images in WebSQL given the storage limitations, or would it be better to write to the file system?
  • Commented on 04-26-2014 at 8:36 AM
    @Zim: If you are using PhoneGap, then just use the file system. If you have further questions about this, please use the contact form (or StackOverflow, I try to check the Cordova tag there daily) as it is not on topic for this blog post.
  • Pedro #
    Commented on 04-28-2014 at 3:48 PM
    Hi Raymond,

    Thank you for the post!! Very Nice!

    I would like to know if it's possible to take a picture and auto save into the picture library.

    Thanks
  • Shaifee Setia #
    Commented on 04-29-2014 at 10:31 AM
    Hi Raymond,

    Its really an awesome post.Thank you for your post!!

    Thanks,
    Shaifee
  • Commented on 04-29-2014 at 10:56 AM
    I think (stress think) pictures are always saved anyway, right? Did you check?
  • Shaifee Setia #
    Commented on 04-30-2014 at 9:17 AM
    Hi Raymond,

    I was also looking for pictures if saved anywhere but I didn't find pictures anywhere on device iPhone/iPad.

    Thanks,
    Shaifee
  • Commented on 04-30-2014 at 2:16 PM
    Interesting. So iOS may be assuming then that the pic you take is ONLY for uploads. On Android I think they always save the picture, which makes more sense. Not sure what you can do about that to be honest.
  • Elad #
    Commented on 05-17-2014 at 3:07 PM
    Really need your help here -
    How can I prevent the photo from being saved to the gallery after being taken ? I'm only referring to Android.
    I want to upload the photo to my server with Ajax (which I do know how to do) but it's important that it will not stay on the device (in iOS it's not being saved, as you've already mentioned).
    Please help as this is a very critical issue for me..
    Thanks a lot !
  • Commented on 05-18-2014 at 6:45 PM
    As far as I know, you have zero control over this method. If you used Cordova, you could handle it of course.
  • johntorri #
    Commented on 06-03-2014 at 8:01 AM
    how can i upload the image which i was taken?
  • Commented on 06-03-2014 at 8:56 AM
    It is a form already, so when you submit, it will send it.
  • johntorri #
    Commented on 06-04-2014 at 1:25 AM
    Ok. thanks. Great post. but i´ve one more question: how can i get the path of the picture?
  • Commented on 06-04-2014 at 9:44 AM
    The file field can be read via JavaScript. But that's all you can. A web page can't write to the file system or copy files around.
  • Commented on 06-05-2014 at 7:03 PM
    Thanks for your great articles Raymond. I have learned a lot of great info from your website.
  • johntorri #
    Commented on 06-12-2014 at 2:13 AM
    Hello again, i´ve finished my little script, the server recieves the file correctly, but only works for me on firefox browser app. but i need implement this on dolphin browser. do you have any idea?
  • Commented on 06-12-2014 at 6:58 AM
    Dolphin may simply not support this.
  • Bhavik #
    Commented on 06-18-2014 at 10:59 AM
    Hi Raymond, nice article, I would like to try it if you don't mind.

    Just can I know where can I find the quantize.js and color-thief.js file you have imported?

    Thanks.
  • Commented on 06-18-2014 at 11:04 AM
    Check here: http://lokeshdhakar.com/projects/color-thief/
  • Quint #
    Commented on 07-08-2014 at 1:47 AM
    Very well done. Thanks for sharing!
  • Commented on 07-08-2014 at 1:12 PM
    Man, no kidding. Awesome!

    Thanks for sharing! It helped me a lot!

    Cheers,

    Gyo
  • dhayalan #
    Commented on 07-30-2014 at 2:58 AM
    Hi,

    I'm Developing a responsive web application using php, for which i need a device camera to be used. provide me some extra info for my project ..


    Thanks in advance...
  • Commented on 07-30-2014 at 6:54 AM
    You need to ask a specific question. Your comment is too broad.
  • Ericson #
    Commented on 08-04-2014 at 12:49 AM
    Does it have a function for adding frames or overlays?
  • Commented on 08-04-2014 at 10:29 AM
    Not that I know of.
  • Greg #
    Commented on 08-04-2014 at 1:15 PM
    This is exactly what I'm looking for! thanks for sharing. I have one question.
    How can I read binary data from event.target.files[0]? basically I want to populate a text field with the image binary as a text

    Thank you!
  • Commented on 08-04-2014 at 1:23 PM
    You would need to work with JS's BLOB support. I've done it a few times, but I'm not very familiar with it. I'd hit MDN as they have good docs on it.
  • recky #
    Commented on 08-07-2014 at 12:36 AM
    thanks Mr. Raymond, nice script. can you help me how to save that picture into database mysql ?
  • Commented on 08-07-2014 at 8:45 AM
    This posts just like any regular form post with a file attachment. What I would do server side is:

    a) send the upload to a temporary dir NOT under web root
    b) double check to ensure it is a valid image
    c) move it to a location that makes sense, maybe even s3, and note the filename
    d) update whatever mysql table makes sense with the filename

    You can store binary data in MySQL, but I'd just store the path.
  • Commented on 08-08-2014 at 4:42 AM
    Hello Raymond.
    I tried the above mentioned code without using the quantize.js and color-theif js as i don't require the color palate option.

    When i tested the page everything seems to works fine on the mobile browser except that the image is getting rotated by 90 degree when clicked through camera. But when i try to use the same code in the mobile webview (placed inside an andriod/IOS app to view the page) it didn't work. Even in case of android, clicking on the button does nothing.

    Can you please suggest what can be the issue and how can i resolve that.


    Thank You.
  • poonam #
    Commented on 08-08-2014 at 4:43 AM
    *It is really very urgent if you can help me on this.
  • Commented on 08-08-2014 at 10:59 AM
    When you debugged, what did you see? Use Chrome Remote Debugging and dig into the problem.
  • Greg #
    Commented on 08-21-2014 at 2:55 PM
    Raymond,

    I'm getting the error "Can't find variable: URL" in Safari. It works well in Chrome.
    The line is
    $("#yourimage").attr("src",URL.createObjectURL(event.target.files[0]));

    Any ideas?
    TIA
  • Commented on 08-21-2014 at 3:01 PM
    Try using webkitURL. It seems to be prefixed still.
  • Commented on 08-22-2014 at 8:22 AM
    Very gud description, i have captured image from my android phone but i want to save image in my database or folder, how to achive it??
  • Commented on 08-22-2014 at 8:57 AM
    If you mean on a server, you would need to post the form to something that can handle it.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty