Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-4865] iOS: imageAsCropped rotates image

GitHub Issuen/a
TypeBug
PriorityLow
StatusClosed
ResolutionFixed
Resolution Date2016-07-21T19:44:46.000+0000
Affected Version/sRelease 1.7.2, Release 2.1.0
Fix Version/sRelease 6.0.0
ComponentsiOS
Labelsn/a
ReporterAlan Leard
AssigneeAngel Petkov
Created2011-08-01T18:12:44.000+0000
Updated2016-09-23T22:29:59.000+0000

Description

imageAsCropped seems to be rotating the image 90 degrees when applied. Before Crop: http://support-admin.appcelerator.com/files/cf1c121c-b9ae-11e0-8901-12313b1264a1/Before_crop.PNG After Crop: http://support-admin.appcelerator.com/files/cf110d22-b9ae-11e0-8901-12313b1264a1/After_crop.PNG Repro Code:
var win = Ti.UI.createWindow();
var currPic = null;

var takePic = Ti.UI.createButton({
    zIndex: 1000,
    width: "90%",
    height: 40,
    title: "Take picture"
});
var imgView = null;

takePic.addEventListener("click", function() {
    if (currPic !== null) {
        var croppedImg = currPic.imageAsCropped({
            x: 0,
            y: 0,
            width: currPic.width,
            height: currPic.height
        });

        imgView.image = croppedImg;
    } else {
        Ti.Media.requestCameraPermissions(takePhoto);
    }
});

win.add(takePic);
win.open();

function takePhoto(e) {
    if (!e.success) {
        Ti.API.error("No camera permissions granted");
        return;
    }
    
    Ti.Media.showCamera({
        success: function(event) {

            takePic.title = "Crop image";

            var image = event.media;
            var width = image.width / 5;
            var height = image.height / 5;

            currPic = image;

            imgView = Ti.UI.createImageView({
                zIndex: 0,
                width: width,
                height: height,
                image: image,
                top: 40
            });

            win.add(imgView)
        },
        cancel: function() {},
        error: function(error) {},
        saveToPhotoGallery: false,
        mediaTypes: [Ti.Media.MEDIA_TYPE_PHOTO]
    });
}

Comments

  1. Junaid Younus 2012-07-12

    Tested on an iPhone 3GS with 2.1GA, issue still reproducible.
  2. Fokke Zandbergen 2013-05-02

    Tested on iPhone 4S with 3.1GA, still the same. A workaround:
       var tmp = Ti.Filesystem.getFile(Ti.Filesystem.tempDirectory, 'showCamera');
       tmp.write(e.media);
       e.media = tmp.read();
       
    *Note:* The new e.media wil not have width and height, so read those out of the old e.media before.
  3. Thiagarajan 2013-05-02

    or If we do imageAsResized and then imageAsCropped it is not rotating the image
       var image = event.media.imageAsResized(event.media.width, event.media.height).imageAsCropped({ width:newWidth, height:newHeight, x:0, y:0 });
       
  4. Fokke Zandbergen 2013-05-02

    Indeed [~tvaradharaju]'s solution is much better and preserves width and height.
  5. Fokke Zandbergen 2013-09-30

    This issue still exists, also in ti.imagefactory by the way, which of course under the hood uses the same TiUIImageResize. Any updates?
  6. Fokke Zandbergen 2013-09-30

    [~tvaradharaju] it looks like your workaround doesn't work on Android (4.1.2 on Samsung S2), only on iOS?
  7. Fokke Zandbergen 2014-04-28

    I believe this should now be fixed by TIMOB-14559
  8. Ingo Muschenetz 2014-04-28

    [~fokke], TIMOB-14559 relates to Android, as this is iOS. Is that what you mean?
  9. Fokke Zandbergen 2014-04-29

    Missed that small detail :) Maybe the problem is the same?
  10. Tim Poulsen (ACV) 2016-05-05

    This is still happening with TiSDK 5.2.2.GA. Since it's fixed in ImageFactory (as are other bugs), you should either backport those fixes to the main Blob APIs or deprecate the Blob APIs and move the ImageFactory stuff into the main body of APIs.
  11. Fokke Zandbergen 2016-05-05

    [~cng] I agree, we should bring what we have in ti.imagefactory into core and archive the module. It makes no sense to have a module that fixes stuff that is broken in core instead of fixing it in core.
  12. Angel Petkov 2016-07-07

    Hello, the issue lays within the UIImagePickerController, the image it returns contains the wrong orientation, which is why when its cropped appears to have rotated. However this only happened if the image is not saved and directly passed from the picker to the "imageAsCropped". This bug occurs not only with the SDK but also when using ti.imagefactory. Demo examples underneath one using the SDK imageAsCropped and the other ti.imagefactory. * SDK :https://gist.github.com/AngelkPetkov/422f079c0fcde8a11b6cee4c36130598 * ImageFactory :https://gist.github.com/AngelkPetkov/b56351c23fee950a894bc7175cc2002d In my opinion i think we should move ti.imagefactory to Appcelerator acrhive and add any of the features that were available on the module but not on the SDK :). The classes it used for calculating the image values are actually already part of the SDK. * [Resize](https://github.com/AngelkPetkov/titanium_mobile/blob/master/iphone/Classes/UIImage%2BResize.m) * [Alpha](https://github.com/AngelkPetkov/titanium_mobile/blob/master/iphone/Classes/UIImage%2BAlpha.m) * [RoundedCorner](https://github.com/AngelkPetkov/titanium_mobile/blob/master/iphone/Classes/UIImage%2BRoundedCorner.m) PR: https://github.com/appcelerator/titanium_mobile/pull/8113 *Testing* Use the SDK demo code above once the image is cropped it should appear to be exactly the same with no rotation added, unless you change the crop values.
  13. Tim Poulsen (ACV) 2016-07-08

    I do not agree that the issue is with the UIPickerController. We have the rotation problem using photos taken by the camera. As a result, we have to use the ImageFactory to work around this bug.
  14. Angel Petkov 2016-07-13

    [~acvauctions] Hello, the UIImagePickerController is the native object we use to access the camera, so when i was describing the issue to be with the picker I'm actually referencing the camera. I can understand the confusion as I didn't make it very clear. Did you run the code example above using the ImageFactory, it reproduces the issue with the rotation. Could you please provide the code example with the workaround, so others can use it until the PR is merged. Once this PR is merged it will resolve the issue :).
  15. Tim Poulsen (ACV) 2016-07-14

    The name of that object certainly confused me. Thanks for the clarification. I've pulled the relevant code out of our project, removed some app-specific code, and put it at https://gist.github.com/skypanther/268623df3cb30143e03a49f0e9ffda5f I have not tested this after making the modifications, so I might have introduced a bug when I removed our internal code. But, this is what we're using to resize and crop images in our app. Not there's a separate bug mentioned in the comments that I don't think is filed anywhere. Setting crop offsets other than 0,0 crashes on Android. So, don't do that! (till it's fixed)
  16. Abir Mukherjee 2016-09-23

    Verified fix with Environment: NPM Version: 2.15.9 Node Version: 4.5.0 Mac OS: 10.11.6 Appc CLI: 5.5.0 Appc CLI NPM: 4.2.7 Titanium SDK version: 6.0.0.v20160922115636 Appcelerator Studio, build: 4.7.1.201609100950 Xcode 8.0 GM I was able to reproduce the issue with Titanium SDK version 5.5.0 using the repro code in the Description. I ran the code on an iPhone 6 iOS v9.3.5. I launched the app, clicked on the button to take a photo, and then clicked on the button "Crop image", and observed that the image rotated 90 degrees when imageAsCropped was applied. I reran the test with Titanium SDK version 6.0.0, and image did not rotate when imageAsCropped was applied.

JSON Source