Search code examples
blackberryimageviewqmlblackberry-10blackberry-cascades

Image rotation issue in blackberry cascades


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

Solution

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