Take a picture and upload it using Webworks on Playbook
When I tried to port a BlackBerry Phonegap project (v 2.0.4) to Playbook (QNX), I noticed that the camera did not return data as Base64 data, rather a FILE_URI, despite the Camera destination type being set to DATA_URL – So going back to first principles, I tried to re-implement the camera capture using BlackBerry WebWorks only.
After 14 tests and failures, this is the final version that worked:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” >
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta name=”viewport” id=”viewport” content=”height=device-height,width=device-width,user-scalable=no” />
<script src=”jquery.js”></script>
<script language=”javascript” type=”text/JavaScript” >
function takePicture()
{
blackberry.media.camera.takePicture(successCB, closedCB, errorCB);
}function successCB(filePath)
{
var can = document.getElementById(‘canvas’);
var ctx = can.getContext(‘2d’);
var img = new Image();
img.onload = function(){
can.width = img.width/10;
can.height = img.height/10;
ctx.drawImage(img, 0, 0, img.width/10, img.height/10);
var b64Text = can.toDataURL();
b64Text = b64Text.replace(“data:image/png;base64,”,””);
upload(b64Text)
}
img.src = filePath;
}
function upload(imageURI)
{
try
{
$.ajax({
type: “POST”,
url: “http://xxx.yourwebsite.com/upload.aspx”,
data: { image: imageURI}
}).done(function( msg ) {
alert(msg);
}).fail(function(a,b){
alert( “Failed to save:” + b);
});
}
catch(ex)
{
alert(ex);
}
}
function closedCB() {}
function errorCB(e) {}
</script>
</head>
<body >
<p>(V14) Test the Camera by pressing the button below</p>
<b><a href=”#” onclick=”takePicture();”>Take a Picture</a></b><br>
<canvas id=”canvas”></canvas>
</body>
</html>
Again, I’ve omitted the URL of the uploading script, but the source code for this can be found earlier in this blog.
I did notice that Webworks’ BlobToString BASE64 didn’t seem to work, so I instead, drew the image onto a canvas, (resized to a 10th of the normal size, since the PlayBook’s photos are massive). And called toDataURL on the canvas to get the Base64 image, then stripped off the data:image/png;base64,
Now, to replace the non-working Phonegap code with this working code…
Network Programming in .NET 