[TIMOB-4865] iOS: imageAsCropped rotates image
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Low |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2016-07-21T19:44:46.000+0000 |
Affected Version/s | Release 1.7.2, Release 2.1.0 |
Fix Version/s | Release 6.0.0 |
Components | iOS |
Labels | n/a |
Reporter | Alan Leard |
Assignee | Angel Petkov |
Created | 2011-08-01T18:12:44.000+0000 |
Updated | 2016-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]
});
}
Tested on an iPhone 3GS with 2.1GA, issue still reproducible.
Tested on iPhone 4S with 3.1GA, still the same. A workaround:
*Note:* The new
e.media
wil not havewidth
andheight
, so read those out of the olde.media
before.or If we do imageAsResized and then imageAsCropped it is not rotating the image
Indeed [~tvaradharaju]'s solution is much better and preserves width and height.
This issue still exists, also in
ti.imagefactory
by the way, which of course under the hood uses the sameTiUIImageResize
. Any updates?[~tvaradharaju] it looks like your workaround doesn't work on Android (4.1.2 on Samsung S2), only on iOS?
I believe this should now be fixed by TIMOB-14559
[~fokke], TIMOB-14559 relates to Android, as this is iOS. Is that what you mean?
Missed that small detail :) Maybe the problem is the same?
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.
[~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.
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.
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.
[~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 :).
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)
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.