tabris-js icon indicating copy to clipboard operation
tabris-js copied to clipboard

captured Photos on Tablet are flipped 90 degrees

Open bezkel opened this issue 3 years ago • 2 comments

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

bezkel avatar Jun 05 '22 11:06 bezkel

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.

cookieguru avatar Jun 07 '22 08:06 cookieguru

Thanks for bringing up the issue. We will look into it.

mpost avatar Jun 21 '22 07:06 mpost