|Creating Web Apps - The Camera API|
|Written by Mike James|
Page 2 of 2
Using Image To Find Properties
What if you want to load the image and just discover some details such as its width and height. The file object only gives you the size of the file, its name and its MIME type, if known. To discover the size of the image you have to load it into something that understands the format. In this case you could use an Image object, for example, but there is a problem - the properties of the Image object are not available until the image file has been loaded and this is an asynchronous event.
So to find the width you might use:
Of course, in a real program you might do something more useful with the information.
Loading The Photo To Canvas
We can also use the same technique to draw the photo directly to a canvas object.
This is just a matter of loading the file into an Image object, as before and then when it is loaded rendering it to the canvas.
You can now play around with the photo using the standard canvas drawing tools and save it back to a data URL in a format of your choice.
Customizing the Button
The biggest problem with the HTML Media Capture API is that the button and file selection box it displays are not particularly suitable. They just don't tell the user that they are about to take a photo - they get involved in picking files.
In a well designed API we would have the option of changing the button's look, but this is not included in the standard. Indeed changing things that might be used to mislead the user is a security risk. The newer streaming API gets around the problem by asking for the users permission to use the camera, but in this case security is enforced by being obvious about what is happening.
To replace the button is difficult because different browsers use different security rules. You might think that a good way to do the job would be to hide the input element and then trigger its click event programmatically.
This works in Firefox, but not in Chrome.
The reason seems to be (there is no documentation) that Chrome refuses to fire the click event unless the button is visible.
However visibility can be achieved in more than one way and Chrome doesn't see to check to make sure that the button is big enough to be seen - so much for security. You have to conclude that it would be easier if Chrome just allowed the click to work while the button was hidden. As it is the imperfect security just makes life difficult for the programmer.
The simplest way to hide an element without actually setting it to hidden is to set its size to zero.
Now we will have a hidden snap input element, called hiddensnap and a button called snap that triggers the picture taking. You could use any element you care to design in place of the button.
This is not a perfect solution, but at least now the button that the user presses seems to have something to do with taking a photo. Unfortunately they still have to select the device they are going to use and there seems to be no way around this particular problem.
There is always the possibility that one of the browsers will add the rule that you can't raise a click event on an object that is of zero size, but this seems unnecessary. The security is in the fact that the camera cannot be clicked without the user doing the clicking - and this should be sufficient.
Perhaps the Media Streaming API will be better.
This article is one in a series on creating web apps:
or email your comment to: email@example.com
To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin, or sign up for our weekly newsletter.
|Last Updated ( Monday, 21 January 2013 )|