Hi,
I'm having trouble with the photo-taking and uploading portion of an app I'm working on. At the moment, I'm concentrating on iOS (specifically, I'm testing on an iPhone 4, iOS 6). The issue occurs when the app base64 encodes the image in order to later upload that string (data URL). In landscape-left, the encoded image is OK. In landscape-right, the image is upside down. In portrait, the image gets squeezed horizontally (reduced to width/height fraction of its full width), then a vertical black bar is added to return it to full width, then it's rotated -90deg into landscape orientation (reduced-size sample photo attached). I'm thinking this has something to do with the fact that iOS reports the same image dimensions (w=2592, h=1936) regardless of whether the image was taken in portrait or landscape.
If I could capture the physical device orientation while the photo is being taken, that might help, but I haven't been able to do that either (app is fixed in portrait mode and querying device orientation always returns 0 - and anyhow that's not captured during image capture).
Any help would be much appreciated. The heart of the photo-taking and encoding code is below. Thanks.
//Camera button functionality
ksApp.takepicture = function()
{
if (ksApp.photoUploadInProgress) return;
intel.xdk.camera.takePicture(80, true, "jpg");
}
//Event listener for camera
document.addEventListener("intel.xdk.camera.picture.add",takepicOnSuccess);
document.addEventListener("intel.xdk.camera.picture.busy",takepicOnSuccess);
document.addEventListener("intel.xdk.camera.picture.cancel",takepicOnSuccess);
function takepicOnSuccess(event)
{
if (event.success === true)
{
$.ui.showMask("Processing photo");
// get the photo file url from the camera object
var imagesrc = intel.xdk.camera.getPictureURL(event.filename);
ksApp.photograph.Url = imagesrc;
// construct the base64-encoded data-url of the photo
var imgObj = new Image();
imgObj.src = imagesrc;
var imgDataUrl;
$(imgObj).load(function(){
//wait for image to load before computing base64 encoded data url
imgDataUrl = getBase64ImageDataUrl(imgObj);
ksApp.photograph.Base64ImageDataUrl = imgDataUrl;
// store the photo object in local storage
ksShared.localStorage_setItem(ksApp.photographKey, JSON.stringify(ksApp.photograph));
// display the photo
var pic = document.getElementById("photograph-img");
//pic.src = imagesrc;
pic.src = imgDataUrl;
$('#photograph-img').css('display','block');
// clear the processing mask
$.ui.hideMask();
});
}
else
{
if (event.message !== undefined)
{
alert(event.message);
}
else
{
alert("Error capturing picture");
}
}
}
function getBase64ImageDataUrl(img) {
var canvas, ctx, dataURL;
canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// Copy the image contents to the canvas
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
// Get the data-URL formatted image
dataURL = canvas.toDataURL("image/jpeg");
return dataURL;
}
Link Copied
