topic FWIW, I have found the in Software Archive

Camera image orientation and problems with base64 encoding / iOS

Jerry_A_ — Thu, 28 Aug 2014 16:56:10 GMT

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;
}

Nobody has encountered

Jerry_A_ — Mon, 08 Sep 2014 15:59:14 GMT

Nobody has encountered anything like this before?

I have seen this problem

PaulF_IntelCorp — Sat, 20 Sep 2014 19:38:44 GMT

I have seen this problem before, but I'm do not recall the solution. I would try using the Cordova camera plugin to see if it resolves this issue (and use the Cordova build system). If it does not, then search for "PhoneGap Cordova camera orientation" and you should find some relevant results.

I am also facing the same

Rajesh_M_1 — Fri, 20 Mar 2015 04:41:04 GMT

I am also facing the same issue. I am using my Samsung Tab S, and when capturing the image from device in portrait mode, image is getting in landscape mode. I can set orientation of device in portrait or landscape, but don't know how to set orientation for camera image capture. I am not getting this issue in my iPhone 5S, but getting issue in Android Tab.

I believe this is related to

John_H_Intel2 — Fri, 20 Mar 2015 13:41:57 GMT

I believe this is related to the intel.xdk.camera functions. Switch to the cordova camera api and it should fix the issue.

FWIW, I have found the

Barry_Johnson — Fri, 20 Mar 2015 14:38:22 GMT

FWIW, I have found the Cordova plugin has similar orientation issues on iOS. I think it actually worked ok with with correctOrientation flag set under one of the 8.0.x or 8.1.x versions but then started being troublesome again.

Workarounds include implementing an image rotate feature for the end user and optionally detecting iOS and setting the initial rotation oneself.