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

Question

我有一个

PreviewView

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

我想在成功捕获图像后向用户显示图像，使其与

PreviewView

的大小相同，这样我就不必裁剪或拉伸它。

是否可以更改宽高比，以便在每个设备上它都是

PreviewView

的大小，还是我必须将其设置为固定值？

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>

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
  }

这对我有用。

Answer 3

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

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

viewFinder.post {
    startCamera()
}

Answer 4

这篇帖子可能有助于在Android中进行更新的使用。

为了标准化 PreviewView、ImageAnalysis 和 ImageCapture 之间的分辨率，您希望将所有这些“案例”“链接”到一个还包含“ViewPort”的组