Blackberry webworks 10 using image from picture taken\uploaded - blackberry-10

Question

I am stuck with an issue and I have no idea what to try next.
In My application I offer my user a choice to either take a photo or choose a photo from the gallery. This part works fine, the problem arises with the saving\reading of the photo. Lets take this from the camera invoke perspective.
function startCameraApp() {
PhotoTaken = false;
blackberry.event.addEventListener("onChildCardClosed", sharePhoto);
blackberry.invoke.invoke({
target: "sys.camera.card"
}, onInvokeSuccess, onInvokeError);
}
and in sharePhoto I have the following code...
function sharePhoto(request) {
var image = new Image();
image.src = "file://" + request.data;
image.onload = function () {
// Now here I need to read the image file and convert it into base64.
var resized = resizeMe(image); // the resizeMe function is given below and it simply makes my image smaller
var imagedata = resized.split("base64,");
sessionStorage.setItem("MyNewPicture", imagedata);
}
}
function resizeMe(img) {
var canvas = document.createElement('canvas');
var max_width = 600;
var max_height = 600;
var width = img.width;
var height = img.height;
// calculate the width and height, constraining the proportions
if (width > height) {
if (width > max_width) {
height = Math.round(height * max_width / width);
width = max_width;
}
} else {
if (height > max_height) {
width = Math.round(width * max_height / height);
height = max_height;
}
}
//resize the canvas and draw the image data into it
img.width = width;
img.height = height;
canvas.width = width;
canvas.height = height;
canvas.classname += "ui-hidden";
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
return canvas.toDataURL();
}
So the app runs and it takes the photo and everything seems fine, yet the data uploaded to local storage is simply a blank screen. It works 100% in the blackberry 10 simulator, but not on my device. On the device it saves an empty string.
Edit
Ok. So I added this to my function for testing purposes and I am still stuck and I don't know what to do...
function sharePhoto(request) {
var image = new Image();
image.src = "file://" + request.data;
image.onload = function () {
// Now here I need to read the image file and convert it into base64.
var resized = resizeMe(image); // the resizeMe function is given below and it simply makes my image smaller
var imagedata = resized.split("base64,");
alert(imagedata); // This returns a blank popup
sessionStorage.setItem("MyNewPicture", imagedata);
}
}

Answer 1

I believe when you use the split method it returns an array, so you'd access it like this:
var resized = resizeMe(image);
var imagedata = resized.split("base64,");
imagedata = imagedata[1]; // this gives you everything after the 'base64,' string
However, the main problem I see is that you're splitting the imagedata string which is removing the whole 'this is an image' prefix from the data.
When you display the imagedata as an image, you need to have the data:image/jpeg;base64,
prefix as well.
So that being said, your images source would be
data:image/jpeg;base64,<rest of base64 string here>

Answer 2

I needed to include an extra element in my application's config.xml.
<access subdomains="true" uri="file://accounts/"></access>
<access subdomains="true" uri="file://accounts/100/shared/camera/"></access>
This gives access to your application to these folders and their containting files. Simulator's does not require this permission.