如何使用CameraX将PreviewView宽高比与捕获的图像匹配

问题描述

我有一个PreviewView占据了整个屏幕，除了工具栏。相机的预览效果很好，但是当我捕获图像时，纵横比完全不同。

成功捕获图像后，我想向用户显示图像，因此它的大小与PreviewView相同，因此不必裁剪或拉伸图像。

是否可以更改纵横比，以便在每台设备上都是PreviewView的大小？还是必须将其设置为固定值？

解决方法

您可以在构建Preview和ImageCapture用例时设置其长宽比。如果两个用例都设置了相同的宽高比，则最终应获得与相机预览输出匹配的捕获图像。

示例：将Preview和ImageCapture的宽高比设置为4：3

Preview preview = new Preview.Builder()
            .setTargetAspectRatio(AspectRatio.RATIO_4_3)
            .build();
ImageCapture imageCapture = new ImageCapture.Builder()
            .setTargetAspectRatio(AspectRatio.RATIO_4_3)
            .build();

这样做，您很可能最终仍会捕获到与PreviewView显示的图像不匹配的图像。假设您没有更改默认的缩放比例类型PreviewView，它将等于ScaleType.FILL_CENTER，这意味着除非相机预览输出的长宽比与PreviewView匹配， PreviewView将裁剪预览的一部分（顶部和底部，或右侧和左侧），从而导致捕获的图像与PreviewView显示的图像不匹配。要解决此问题，应将PreviewView的长宽比设置为与Preview和ImageCapture用例相同的长宽比。

示例：将PreviewView的宽高比设置为4：3

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.camera.view.PreviewView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="3:4"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

我在使用 CameraX 时遇到了同样的问题。我遵循了 excellent answer 给出的 @Husayn Hakeen。但是，我的应用程序需要 previewView 来精确匹配设备高度宽度。所以我做了一些改变。在 kotlin（或 java）中，我添加了

Preview preview = new Preview.Builder()
            .setTargetAspectRatio(AspectRatio.RATIO_16_9)
            .build();
ImageCapture imageCapture = new ImageCapture.Builder()
            .setTargetAspectRatio(AspectRatio.RATIO_16_9)
            .build();

我的 xml 有：

    <androidx.camera.view.PreviewView
      android:id="@+id/viewFinder"
      android:layout_width="0dp"
      android:layout_height="0dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      tools:background="@color/colorLight"
      />

在 kotlin 中，我以像素为单位测量了设备的实际高度和宽度：

val metrics: DisplayMetrics = DisplayMetrics().also { viewFinder.display.getRealMetrics(it) }
    val deviceWidthPx = metrics.widthPixels
 val deviceHeightPx = metrics.heightPixels

使用这些数据，我使用了一些基本的坐标几何在拍摄的照片上绘制了一些线条：

如您所见，黄色矩形表示设备预览，因此这就是您在预览中看到的内容。我需要执行中心裁剪，这就是我绘制蓝色方块的原因。

在那之后，我裁剪了预览：


  @JvmStatic
  fun cropPreviewBitmap(previewBitmap: Bitmap,deviceWidthPx: Int,deviceHeightPx: Int): Bitmap {

    // crop the image
    var cropHeightPx = 0f
    var cropWidthPx = 0f
    if(deviceHeightPx > deviceWidthPx) {
      cropHeightPx = 1.0f *previewBitmap.height
      cropWidthPx = 1.0f * deviceWidthPx / deviceHeightPx * cropHeightPx
    }else {
      cropWidthPx = 1.0f *previewBitmap.width
      cropHeightPx = 1.0f * deviceHeightPx / deviceWidthPx * cropWidthPx
    }

    val cx = previewBitmap.width / 2
    val cy = previewBitmap.height / 2

    val minimusPx = Math.min(cropHeightPx,cropWidthPx)
    val left2 = cx - minimusPx / 2
    val top2 = cy - minimusPx  /2

    val croppedBitmap = Bitmap.createBitmap(previewBitmap,left2.toInt(),top2.toInt(),minimusPx.toInt(),minimusPx.toInt())
    return croppedBitmap
  }

这对我有用。

android android android-camera2 android-camerax kotlin kotlin