Jetpack Compose 截取可组合功能的截图？

Question

我想截取 Jetpack Compose 上特定可组合功能的屏幕截图。我怎样才能做到这一点？请任何人帮助我。我想截取可组合功能的屏幕截图并与其他应用程序共享。

我的函数示例：

@Composable
fun PhotoCard() {
    Stack() {
        Image(imageResource(id = R.drawable.background))
        Text(text = "Example")
    }
}

这个功能怎么截图？

Answer 1

您可以创建一个测试，将内容设置为该可组合项，然后调用composeTestRule.captureToImage()。它返回一个ImageBitmap。

截图比较器中的使用示例：https://github.com/android/compose-samples/blob/e6994123804b976083fa937d3f5bf926da4facc5/Rally/app/src/androidTest/java/com/example/compose/rally/ScreenshotComparator.kt

Answer 2

您可以使用onGloballyPositioned 获取可组合视图在根组合视图中的位置，然后将根视图的所需部分绘制到Bitmap 中：

val view = LocalView.current
var capturingViewBounds by remember { mutableStateOf<Rect?>(null) }
Button(onClick = {
    val bounds = capturingViewBounds ?: return@Button
    val image = Bitmap.createBitmap(
        bounds.width.roundToInt(), bounds.height.roundToInt(),
        Bitmap.Config.ARGB_8888
    ).applyCanvas {
        translate(-bounds.left, -bounds.top)
        view.draw(this)
    }
}) {
    Text("Capture")
}
ViewToCapture(
    modifier = Modifier
        .onGloballyPositioned {
            capturingViewBounds = it.boundsInRoot()
        }
)

请注意，如果您在 ViewToCapture 顶部有一些视图，例如与 Box 一起放置，它仍然会出现在图像上。

附言有一个bug 产生Modifier.graphicsLayer 效果，offset { IntOffset(...) }（在这种情况下你仍然可以使用offset(dp)），scrollable 和惰性视图位置没有正确显示在屏幕截图上。如果您遇到过，请给问题加注星标以获得更多关注。

Answer 3

正如评论中提到的@Commonsware，并假设这不是关于截图测试：

根据official docs，您可以使用LocalView.current 访问可组合函数的视图版本，并将该视图导出到这样的位图文件（以下代码位于可组合函数内部）：

    val view = LocalView.current
    val context = LocalContext.current

    val handler = Handler(Looper.getMainLooper())
    handler.postDelayed(Runnable {
        val bmp = Bitmap.createBitmap(view.width, view.height,
            Bitmap.Config.ARGB_8888).applyCanvas {
            view.draw(this)
        }
        bmp.let {
            File(context.filesDir, "screenshot.png")
                .writeBitmap(bmp, Bitmap.CompressFormat.PNG, 85)
        }
    }, 1000)

writeBitmap 方法是 File 类的简单扩展函数。示例：

private fun File.writeBitmap(bitmap: Bitmap, format: Bitmap.CompressFormat, quality: Int) {
    outputStream().use { out ->
        bitmap.compress(format, quality, out)
        out.flush()
    }
}

Answer 4

您可以使用 @Preview 创建预览功能，在手机或模拟器上运行该功能并截取​​组件的屏幕截图。

Answer 5

使用 PixelCopy 对我有用：

@RequiresApi(Build.VERSION_CODES.O)
suspend fun Window.drawToBitmap(
    config: Bitmap.Config = Bitmap.Config.ARGB_8888,
    timeoutInMs: Long = 1000
): Bitmap {
    var result = PixelCopy.ERROR_UNKNOWN
    val latch = CountDownLatch(1)

    val bitmap = Bitmap.createBitmap(decorView.width, decorView.height, config)
    PixelCopy.request(this, bitmap, { copyResult ->
        result = copyResult
        latch.countDown()
    }, Handler(Looper.getMainLooper()))

    var timeout = false
    withContext(Dispatchers.IO) {
        runCatching {
            timeout = !latch.await(timeoutInMs, TimeUnit.MILLISECONDS)
        }
    }

    if (timeout) error("Failed waiting for PixelCopy")
    if (result != PixelCopy.SUCCESS) error("Non success result: $result")

    return bitmap
}

例子：

val scope = rememberCoroutineScope()
val context = LocalContext.current as Activity
var bitmap by remember { mutableStateOf<Bitmap?>(null) }

Button(onClick = {
    scope.launch {
        //wrap in a try catch/block
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            bitmap = context.window.drawToBitmap()
        }
    }

}) {
    Text(text = "Take Screenshot")
}

Box(
    modifier = Modifier
        .background(Color.Red)
        .padding(10.dp)
) {
    bitmap?.let {
        Image(
            bitmap = it.asImageBitmap(),
            contentDescription = null,
            modifier = Modifier.fillMaxSize(),
        )
    }
}

Answer 6

我正在寻找如何在 测试 中截取可组合的屏幕截图，这个问题出现在结果中的第一个问题。所以，对于未来想要在测试中截取/保存/比较屏幕截图或进行屏幕截图测试的用户，我将我的答案放在这里（感谢this）。

确保您拥有此依赖项以及其他 Compose 依赖项：

debugImplementation("androidx.compose.ui:ui-test-manifest:<version>")

^{注意：你可以简单地在androidTest目录中添加一个AndroidManifest.xml文件，并在manifest中添加<activity android:name="androidx.activity.ComponentActivity" />而不是上面的依赖➜ application 元素。
参考this answer。}

以下是一个完整的示例，对名为 MyComposableFunction 的可组合函数的截屏进行截取、保存、读取和比较：

class ScreenshotTest {

    @get:Rule val composeTestRule = createComposeRule()

    @Test fun takeAndSaveScreenshot() {
        composeTestRule.setContent { MyComposableFunction() }
        val node = composeTestRule.onRoot()
        val screenshot = node.captureToImage().asAndroidBitmap()
        saveScreenshot("screenshot.png", screenshot)
    }

    @Test fun readAndCompareScreenshots() {
        composeTestRule.setContent { MyComposableFunction() }
        val node = composeTestRule.onRoot()
        val screenshot = node.captureToImage().asAndroidBitmap()

        val context = InstrumentationRegistry.getInstrumentation().targetContext
        val path = context.getExternalFilesDir(Environment.DIRECTORY_PICTURES)
        val file = File(path, "screenshot.png")
        val saved = readScreenshot(file)

        println("Are screenshots the same: ${screenshot.sameAs(saved)}")
    }

    private fun readScreenshot(file: File) = BitmapFactory.decodeFile(file.path)

    private fun saveScreenshot(filename: String, screenshot: Bitmap) {
        val context = InstrumentationRegistry.getInstrumentation().targetContext
        // Saves in /Android/data/your.package.name.test/files/Pictures on external storage
        val path = context.getExternalFilesDir(Environment.DIRECTORY_PICTURES)
        val file = File(path, filename)
        file.outputStream().use { stream ->
            screenshot.compress(Bitmap.CompressFormat.PNG, 100, stream)
        }
    }
}

我也回答了类似的问题here。