AppStudio 4: The new Camera Control

With the new Camera control, you can add the ability to capture pictures to your app without writing a line of code. It also has a much nicer camera icon than using a text field with an inputType of ‘file’.

Screen Shot 2014-04-18 at 7.52.04 AM

To add a Camera control to your app, drag the Camera control icon from the Toolbox onto the Design Screen. Also drag a PictureBox. Size it so the width is 1.5 times the height for most pictures. If you use the default Id for the PictureBox, you are done. You have a working Camera button in your app.

If you change the ID of the PictureBox, remember to update the “picturebox” property in your Camera control. It needs to know where to put the picture after it has been taken.

The Camera button is based on a jQuery Mobile Button. You can customize its appearance much like any button: use your own text or icon.

Once you have captured the image, you can save it or send it to another device by extracting it from the picture using the toDataURL() function:

  imageFile = PictureBox1.toDataURL()

This returns the image as a string, formatted as a Base64 image. You can save or transfer this result just as you would any string. Browsers recognize Base64 strings as valid images, so you can display it anywhere.