使用 cameraX 的 PreviewView 捕获叠加层

Question

我正在尝试捕捉图像捕捉中包含叠加层的图片。我能够使用 cameraView.overlay.add(binding.textView) 将覆盖设置为 previewView。然而，当尝试使用 imageCapture 保存图像时它没有保存，只保存了图片而不是叠加层。如何使用 PreviewView of camera x.

保存包含叠加层的图像

请不要将其标记为重复。我研究了很多，大多数在线示例都使用旧的 camera api，它不适用于 camera x 库。任何帮助表示赞赏。提前致谢。

这是我的代码


           <FrameLayout
                android:id="@+id/camera_wrapper"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                app:layout_constraintTop_toTopOf="@id/space1"
                app:layout_constraintBottom_toBottomOf="@id/space">
    
                <androidx.camera.view.PreviewView
                    android:id="@+id/camera_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />
    
                <TextView
                    android:id="@+id/text_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="Hello world"
                    android:textSize="42sp"
                    android:textColor="@android:color/holo_green_dark"/>
    
            </FrameLayout>

  private lateinit var outputDirectory: File
  private lateinit var cameraExecutor: ExecutorService
  private var preview: Preview? = null
  private var lensFacing: Int = CameraSelector.LENS_FACING_FRONT
  private var imageCapture: ImageCapture? = null
  private var camera: Camera? = null
  private var cameraProvider: ProcessCameraProvider? = null

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    outputDirectory = getOutputDirectory()
    cameraExecutor = Executors.newSingleThreadExecutor()
  }

  private fun setupCamera() {
    val cameraProviderFuture = ProcessCameraProvider.getInstance(requireContext())

    cameraProviderFuture.addListener(
      Runnable {
        // Used to bind the lifecycle of cameras to the lifecycle owner
        cameraProvider = cameraProviderFuture.get()

        // Get screen metrics used to setup camera for full screen resolution
        val metrics = DisplayMetrics().also { binding.cameraView.display.getRealMetrics(it) }
        Timber.d("Screen metrics: ${metrics.widthPixels} x ${metrics.heightPixels}")

        val screenAspectRatio = aspectRatio(metrics.widthPixels, metrics.heightPixels)
        Timber.d("Preview aspect ratio: $screenAspectRatio")

        val rotation = binding.cameraView.display.rotation

        // CameraProvider
        val cameraProvider = cameraProvider
          ?: throw IllegalStateException("Camera initialization failed.")

        // CameraSelector
        val cameraSelector = CameraSelector.Builder().requireLensFacing(lensFacing).build()

        // add text overlay *---------*
        binding.cameraView.overlay.add(binding.textView)

        // Preview
        preview = Preview.Builder()
          // We request aspect ratio but no resolution
          .setTargetAspectRatio(screenAspectRatio)
          // Set initial target rotation
          .setTargetRotation(rotation)
          .build()

        // ImageCapture
        imageCapture = ImageCapture.Builder()
          .setCaptureMode(ImageCapture.CAPTURE_MODE_MINIMIZE_LATENCY)
          // We request aspect ratio but no resolution to match preview config, but letting
          // CameraX optimize for whatever specific resolution best fits our use cases
          .setTargetAspectRatio(screenAspectRatio)
          // Set initial target rotation, we will have to call this again if rotation changes
          // during the lifecycle of this use case
          .setTargetRotation(rotation)
          .build()

        // Must unbind the use-cases before rebinding them
        cameraProvider.unbindAll()

        try {
          // A variable number of use-cases can be passed here -
          // camera provides access to CameraControl & CameraInfo
          camera = cameraProvider.bindToLifecycle(this, cameraSelector, preview, imageCapture)
          // Attach the viewfinder's surface provider to preview use case
          preview?.setSurfaceProvider(binding.cameraView.surfaceProvider)
        } catch (exc: Exception) {
          Toast.makeText(requireContext(), "Something went wrong. Please try again.", Toast.LENGTH_SHORT).show()
          findNavController().navigateUp()
        }
      },
      ContextCompat.getMainExecutor(requireContext())
    )
  }

private fun takePhoto() {
    imageCapture?.let { imageCapture ->

      // Create output file to hold the image
      val photoFile = createFile(outputDirectory, FILENAME, PHOTO_EXTENSION)

      // Setup image capture metadata
      val metadata = ImageCapture.Metadata().apply {

        // Mirror image when using the front camera
        isReversedHorizontal = lensFacing == CameraSelector.LENS_FACING_FRONT
      }

      // Create output options object which contains file + metadata
      val outputOptions = ImageCapture.OutputFileOptions.Builder(photoFile)
          .setMetadata(metadata)
          .build()

      // Setup image capture listener which is triggered after photo has been taken
      imageCapture.takePicture(outputOptions, cameraExecutor, object : ImageCapture.OnImageSavedCallback {
        override fun onError(exc: ImageCaptureException) {
          Timber.e(exc, "Photo capture failed: ${exc.message}")
        }

        override fun onImageSaved(output: ImageCapture.OutputFileResults) {
          val savedUri = output.savedUri ?: Uri.fromFile(photoFile)
          Timber.d("Photo capture succeeded: $savedUri")

          // Implicit broadcasts will be ignored for devices running API level >= 24
          // so if you only target API level 24+ you can remove this statement
          if (Build.VERSION.SDK_INT < Build.VERSION_CODES.N) {
            requireActivity()
                .sendBroadcast(Intent(android.hardware.Camera.ACTION_NEW_PICTURE, savedUri))
          }


          // If the folder selected is an external media directory, this is
          // unnecessary but otherwise other apps will not be able to access our
          // images unless we scan them using [MediaScannerConnection]
          val mimeType = MimeTypeMap.getSingleton()
              .getMimeTypeFromExtension(savedUri.toFile().extension)
          MediaScannerConnection.scanFile(
              context,
              arrayOf(savedUri.toFile().absolutePath),
              arrayOf(mimeType)
          ) { _, uri ->
            Timber.d("Image capture scanned into media store: $uri")
          }
        }
      })
    }

  }

Answer 1

您必须自己将文字叠加在图片上。我建议使用 takePicture(Executor, …) 将 Jpeg 放入内存；然后，使用其中一个库（不属于 Android 框架，也不属于 Jetpack）覆盖您的文本，并将结果保存在文件中。

如果可以在图像质量上妥协，可以在位图上绘制 Jpeg canvas，然后在上面绘制文本。

Answer 2

使用这个插件https://github.com/huangyz0918/AndroidWM .另外，如果你想自己搭建这个可以帮助你参考。

简单的用法如下

WatermarkText watermarkText = new WatermarkText(inputText)
            .setPositionX(0.5)
            .setPositionY(0.5)
            .setTextColor(Color.WHITE)
            .setTextFont(R.font.champagne)
            .setTextShadow(0.1f, 5, 5, Color.BLUE)
            .setTextAlpha(150)
            .setRotation(30)
            .setTextSize(20);

val bmFinal: Bitmap = WatermarkBuilder
                            .create(applicationContext, capturedImageBitmap)
                            .loadWatermarkText(watermarkText)
                            .watermark
                            .outputImage

// ##### Then save it #########

fun saveImage(bitmap: Bitmap, photoFile: File) {
    val output: OutputStream = FileOutputStream(photoFile)
    bitmap.compress(Bitmap.CompressFormat.JPEG, 100, output)
    output.flush()
    output.close()
    Toast.makeText(
        this@MainActivity,
        "Imaged Saved at ${photoFile.absolutePath}",
        Toast.LENGTH_LONG
    ).show()
}

val photoFile = File(
            outputDirectory,
            SimpleDateFormat(
                FILENAME_FORMAT, Locale.US
            ).format(System.currentTimeMillis()) + ".jpg"
        )

saveImage(bmFinal, photoFile)

Answer 3

也许你可以使用 CameraSource class 并将你的 preview/overlay 放在里面 :

val cameraSource = CameraSource.Builder(requireContext(),FakeDetector()).build()
cameraSource.start(your_preview_overlay)

在你有 API 之后：

takePicture(CameraSource.ShutterCallback shutter, CameraSource.PictureCallback jpeg)

相机源 (https://developers.google.com/android/reference/com/google/android/gms/vision/CameraSource) 用于检测，但您可以创建一个假检测器（没有可检测的）。

Answer 4

@alexcohn's answer 是首选，如果你不能失去质量。但是，如果质量不是什么大问题，那么您可以这样做。

<FrameLayout
            android:id="@+id/camera_wrapper"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintTop_toTopOf="@id/space1"
            app:layout_constraintBottom_toBottomOf="@id/space">

            <androidx.camera.view.PreviewView
                android:id="@+id/camera_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <ImageView
                android:id="@+id/selfie"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:visibility="gone"
                tools:visibility="visible"
                tools:background="@color/gray" />

            <ImageView
                android:id="@+id/overlay"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                tools:src="@drawable/full_frame_gd" />

        </FrameLayout>

PreviewView 有一个内置功能，可以为您提供预览的位图

val bitmap = binding.cameraView.bitmap
binding.selfie.setImageBitmap(bitmap)
binding.selfie.visibility = View.VISIBLE
cameraExecutor.shutdown()
binding.cameraView.visibility = View.GONE

现在您有两张图片，一张用于 selfie，一张用于 overlay。您无法拍摄预览视图的屏幕截图。它有一些限制，我不太确定。但是，我相信可能有解决办法。

从这里您可以像这样截取两个组合图像视图的屏幕截图

private fun captureView(view: View, window: Window, bitmapCallback: (Bitmap)->Unit) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
      // Above Android O, use PixelCopy
      val bitmap = Bitmap.createBitmap(view.width, view.height, Bitmap.Config.ARGB_8888)
      val location = IntArray(2)
      view.getLocationInWindow(location)
      PixelCopy.request(
          window,
          Rect(
              location[0],
              location[1],
              location[0] + view.width,
              location[1] + view.height
          ),
          bitmap,
          {
            if (it == PixelCopy.SUCCESS) {
              bitmapCallback.invoke(bitmap)
            }
          },
          Handler(Looper.getMainLooper()) )
    } else {
      val tBitmap = Bitmap.createBitmap(
          view.width, view.height, Bitmap.Config.RGB_565
      )
      val canvas = Canvas(tBitmap)
      view.draw(canvas)
      canvas.setBitmap(null)
      bitmapCallback.invoke(tBitmap)
    }
  }

在 takePhoto() 函数中，您可以删除 imageCapture.takePicture 逻辑并将其替换为这个。

Handler(Looper.getMainLooper()).postDelayed({
        captureView(binding.cameraWrapper, requireActivity().window) {
          // your new bitmap with overlay is here and you can save it to file just like any other bitmaps.
        }
      }, 500)

使用 cameraX 的 PreviewView 捕获叠加层

capture overlay using PreviewView of cameraX

camera

android

android-layout

android-studio

android-camerax