Image rotation issue in blackberry cascades

Question

I have an app where users can take and save their profile pic. I'm using https://github.com/RileyGB/BlackBerry10-Samples/tree/master/WebImageViewSample sample from github to load image from url to my view and it works fine. The problem is when I save the profile pic from ios and view the profile pic in blackberry it appears 90 degree rotated left. But the same url loads fine in ios and android. Below is the link of a sample image taken from iOS that loads correctly ios and android but shifts left to 90 degrees in blackberry. It works fine for other images that is taken from blackberry or android. Is there anyway to fix this? Any help is appreciated

http://oi57.tinypic.com/2hzj2c4.jpg

Below is a sample code of loading this image in qml

Page {
    Container {
        layout: DockLayout {
        }
        WebImageView {
            id: webViewImage
            url: "http://oi57.tinypic.com/2hzj2c4.jpg"
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            visible: (webViewImage.loading == 1.0)
        }
        ProgressIndicator {
            value: webViewImage.loading
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
            visible: (webViewImage.loading < 1.0)
        }
    }

    actions: [
        ActionItem {
            title: "Clear Cache"
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
                webViewImage.clearCache();
                webViewImage.url = "http://oi57.tinypic.com/2hzj2c4.jpg";
            }
        }
    ]
}

If I open the image in a browser website it is rotated as well (but if I view image itself it is alright). Did you make iOS and Android apps yourself? — Bojan Kogoj
No, someone else did the app in iOS and android, I'm doing it in blackberry. But if I try to load this pic in iOS or android it shows correct without rotation. How do I fix it in blackberry? It seems to work in android so I guess there should be some fix for blackberry too — Francis F
Also if I download this image in my pc(windows 7) the preview shows rotated image but if I copy this image in blackberry device and view it in its gallery it shows correct image. I've also tried to load this image using filepicker after copying it on device but the loaded image with filepicker shows rotated image. — Francis F
Look, image is rotated. EXIF contains this information "Orientation Rotate 90 CW" to correct it, however WebImageView ignores EXIF and doesn't rotate it. Read this on support forums — Bojan Kogoj

Francis F Francis F · Accepted Answer · 2015-02-02T11:35:09

I was able to fix this issue by adding EXIF library and adding an additional function in the webimageview class

QByteArray WebImageView::getRotateImage(QByteArray imageFile)
{
    //Load the image using QImage.
    // A transform will be used to rotate the image according to device and exif orientation.
       QTransform transform;
    QImage image;
    image.loadFromData((unsigned char*)imageFile.data(),imageFile.length(),"JPG");

    ExifData *exifData = 0;
    ExifEntry *exifEntry = 0;
    int exifOrientation = 1;

    // Since the image will loose its exif data when its opened in a QImage
    // it has to be manually rotated according to the exif orientation.
    exifData = exif_data_new_from_data((unsigned char*)imageFile.data(),(unsigned int)imageFile.size());

    // Locate the orientation exif information.
    if (exifData != NULL) {

        for (int i = 0; i < EXIF_IFD_COUNT; i++) {
            exifEntry = exif_content_get_entry(exifData->ifd[i], EXIF_TAG_ORIENTATION);
            // If the entry corresponds to the orientation it will be a non zero pointer.
            if (exifEntry) {
                exifOrientation = exif_get_short(exifEntry->data, exif_data_get_byte_order(exifData));
                break;
            }
        }
    }
    // It's a bit tricky to get the correct orientation of the image. A combination of
    // the way the the device is oriented and what the actual exif data says has to be used
    // in order to rotate it in the correct way.
    switch(exifOrientation) {
        case 1:
            // 0 degree rotation
            return imageFile;
            break;
        case 3:
            // 180 degree rotation
            transform.rotate(180);
            break;
        case 6:
            // 90 degree rotation
            transform.rotate(90);
            break;
        case 8:
            // 270 degree rotation
            transform.rotate(270);
            break;
        default:
            // Other orientations are mirrored orientations, do nothing.
            break;
    }

    // Perform the rotation of the image before its saved.
    image = image.transformed(transform);

    QImage img =image;
    QByteArray arr;
    QBuffer buf(&arr);
    buf.open(QIODevice::WriteOnly);
    img.save(&buf, "PNG");
    buf.close();
    return arr;

}

Image rotation issue in blackberry cascades

1 Answers