tabris-js
tabris-js copied to clipboard
captured Photos on Tablet are flipped 90 degrees
Problem description
captured photos from camera are working as expected. But if I create an ImageBitmap of it, it is flipped 90 degrees. This happend only on my Tablet (Samsung Galaxy Tab A6). On all my Smartphones it worked.
After doing some research, I think it could be in the EXIF Orientation.
I find some possible solutions with the cordova camera plugin (not tried yet) with an option correctOrientation: true.
But I can't set any options like this in the integrated cameraplugin in tabris.
How could I handle this problems without changing to Cordova-Camera-Plugin?
Expected behavior
Picture should not be flipped here.
Environment
- Tabris.js version: 3.8.0
- Device: Galaxy Tab A6
- OS: 'Android 8.1.0
Code snippet
import {app, Button, CameraView, ImageBitmap, contentView, device, ImageView, permission, Popover, Stack} from 'tabris';
app.idleTimeoutEnabled = false;
const camera = device.cameras[0];
permission.withAuthorization('camera',
() => camera.active = true,
() => console.log('"camera" permission is required.'),
(e) => console.error(e));
contentView.append(
<Stack stretch alignment='stretchX' padding={16} spacing={16}>
<CameraView top bottom={16} background='#dddddd' camera={camera}/>
<Button text='Take picture' onSelect={captureImage}/>
</Stack>
);
async function captureImage() {
const capturedImage = await camera.captureImage({flash: 'auto'});
const imageBitmap = await ImageBitmap.createImageBitmap(capturedImage.image)
const popover = Popover.open(
<Popover width={400} height={300}>
<ImageView stretch background='black' image={imageBitmap} zoomEnabled/>
<ImageView left={16} top={16} image='resources/[email protected]'
onTap={() => popover.close()}/>
</Popover>
);
}
I am able to reproduce the issue in portrait mode with a Samsung Tab A (Android 9) on Tabris 3.8.0. I could not reproduce it in landscape.
Note that if the snippet is started with the device in portrait mode and then rotated to landscape the CameraView does not automatically rotate. Then, when an image is captured it is in the correct orientation.
Appologies if this is already clear but you will need to destroy the CameraView instance and recreate it when the orientationChanged event fires.
I find some possible solutions with the cordova camera plugin (not tried yet) with an option correctOrientation: true. But I can't set any options like this in the integrated cameraplugin in tabris.
It is not a plugin but built in to the Tabris.js native part itself and is not able to be modified. If you tried to set the correctOrientation property you would only see the message Ignored unsupported value for property correctOrientation on .... The team will need to investigate the bug and make the modification.
Thanks for bringing up the issue. We will look into it.