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

Question

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

我想在成功捕获图像后向用户显示该图像，使其大小与PreviewView相同，这样我就不必裁剪或拉伸它了。

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

- baltekg

Answer 1

在构建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>

- Husayn Hakeem

---

这是一个经典的答案。请点赞！ - nutella_eater

Answer 2

我正在使用CameraX，并遇到了相同的问题。我遵循了Husayn Hakeen所提供的绝佳答案。然而，我的应用程序需要精确匹配设备高度宽度的预览视图。因此，我进行了一些更改。在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
  }

这对我有用。

- Qazi Fahim Farhan

Answer 3

最简单的解决方案是使用useCaseGroup，将预览和图像捕获用例添加到同一组中，并设置相同的视口。

请注意，使用此解决方案时，您需要在onCreate方法中启动相机（否则您的应用程序将崩溃）：

viewFinder.post {
    startCamera()
}

- Beemo