skip to Main Content

I work on a Flutter app in which I use camera plugin. I want to zoom in to an arbitrary point (offset) of the camera preview, for example to the top-left corner of the screen and then take a photo of it. Using CameraContoroller.setZoomLevel() method zooms into the center of the camera! Is it possbile to achieve the behavior that I want? Thank you in advance!

Here is what I want to achieve!

enter image description here

4

Answers


  1. Unfortunately your wanted behavior is probably not possible with the camera packages. That is because the camera itself can not zoom into a specific area of its view, because of the way how zooming works with the hardware.

    But there are ways to achieve your expected behavior. Try to wrap your CameraPreview with a OverflowBox and/or a ClipRect and position the Preview in a way, that only the part you want to zoom in is visible.
    But be aware, that you "zoom" only virtually this way, because the actual camera view wont change (the resulting cutout may be of worse quality).

    Basically you are creating the illusion of a zoom, by cropping the image to the expected area.

    You can view specific code examples, on how you can implement this functionality in this answer.

    Keep in mind that if you want to take a picture of the "zoomed" area, you have to crop the resulting image again (because the actual camera view doesn’t change), as explained in the question above.

    Login or Signup to reply.
  2. Camera zoom at a particular point of view is not possible even on a native camera or any other camera.

    I’ve checked iphone, android and even Dslr. Since your camera hardware starts with a single point of view spread around. It is impossible to zoom at a particular point without moving or calibrating the camera.

    The problem can only be solved after capturing the snapshot and cropping the particular area thus giving an illusion of that particular zoom.

    However this could be solved if we use multiple cameras and make a mechanism out of it, only reason it has been ignored is because the problem is not much critical to see into.

    Login or Signup to reply.
  3. You can do it but it’s a bit not practical , by showing the Camera Image in a Dragable/zoomable widget like InteractiveViewer(), then wrap it with a GestureDetector() and then make a function that zooms when you double press the image and drag to the point you want.

    Login or Signup to reply.
  4. I’m Trying To Solve Your Problem:

    Code:

       return Listener(
            onPointerDown: (_) => _pointers++,
            onPointerUp: (_) => _pointers--,
            child: Zoom(
              maxZoomWidth: 900,
              maxZoomHeight: 900,
              child: CameraPreview(
                controller!,
                child: LayoutBuilder(
                    builder: (BuildContext context, BoxConstraints constraints) {
                      return GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onScaleStart: _handleScaleStart,
                        onScaleUpdate: _handleScaleUpdate,
                        onTapDown: (TapDownDetails details) =>
                            onViewFinderTap(details, constraints),
                      );
                    }),
              ),
            ),
          );
    

    you just need to wrap

    zoom

    widget on

    CameraPreview

    it’s working fine

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search