I am trying to get the pixels of a `nativeCanvas` into a Bit

Question

I am trying to get the pixels of a `nativeCanvas` into a Bitmap during a `drawWithContent` modifier but `readPixels` always returns false and I don t know why ```drawContent val nativeCanvas = drawContext canvas nativeCanvas val imageInfo = ImageInfo width = 1280 height = 800 colorInfo = ColorInfo colorType = ColorType RGBA 8888 alphaType = ColorAlphaType PREMUL colorSpace = ColorSpace sRGB val bitmap = Bitmap if bitmap setImageInfo imageInfo println Couldn t set imageInfo if bitmap allocPixels println Couldn t allocate pixels if nativeCanvas readPixels bitmap 0 0 println Couldn t read pixels lt this one returns false ```

Kirill Grouchnikov · Answer

Kirill Grouchnikov · Answer

Does not copy and returns false if Source and destination rectangles do not intersect SkCanvas pixels could not be converted to pixmap colorType or pixmap alphaType SkCanvas pixels are not readable for instance SkCanvas is document based SkPixmap pixels could not be allocated pixmap rowBytes is too small to contain one row of pixels

Arjan van Wieringen · Answer

Yes I read that as well But it is very difficult for me to check which case failed

Kirill Grouchnikov · Answer

This one seems to be useful to get the image info from the canvas

Kirill Grouchnikov · Answer

Looks like and do not have bindings for that function You can make a local copy of Skiko add the bindings build it deploy to local Maven and then use the local dependency like this ```resolutionStrategy eachDependency if requested group == org jetbrains skiko useVersion 0 0 0 SNAPSHOT because Replacing for local development ```

Kirill Grouchnikov · Answer

It might be that you won t be able to do this at all Looking at the source of SkiaLayer macos kt at least it appears that the canvas is indeed created by a `PictureHolder`

Kirill Grouchnikov · Answer

image png

Kirill Grouchnikov · Answer

image png

Kirill Grouchnikov · Answer

And very similar in `SkiaLayer awt kt`

Arjan van Wieringen · Answer

Ah okay disappointed so I was trying to do this for creating a screenshot of a running composable without using ImageComposeScene Thanks for your help

Kirill Grouchnikov · Answer

Ah I wasn t dreaming that I saw that question popping up when I woke up

Arjan van Wieringen · Answer

Haha no I deleted it because I thought I had the solution but I hadn t

Kirill Grouchnikov · Answer

I would confirm this with < Igor Demin> to be sure but my overall understanding is that a Compose window on desktop is backed by a single Skia canvas and each composable that puts pixels on the screen is seeing a clipped part into that single window level canvas

Arjan van Wieringen · Answer

I guess that makes sense The question then is can I access the single Skia canvas which is the `nativeCanvas` maybe and get these contents However in your Aurora repository I also saw some sort of screenshot functionality if I am not mistaken

Kirill Grouchnikov · Answer

<https github com kirill grouchnikov aurora blob icicle tools screenshot src desktopMain kotlin org pushingpixels aurora tools screenshot ScreenshotDriver kt L69|https github com kirill grouchnikov aurora blob icicle tools screenshot src desk n org pushingpixels aurora tools screenshot ScreenshotDriver kt> it s using `ImageComposeScene`

Arjan van Wieringen · Answer

Yes that s the one If I am understanding it correctly it is recreating the whole composable tree of your app inside the ImageComposeScene

Kirill Grouchnikov · Answer

I wouldn t say recreating The way I see it conceptually that for taking screenshots I place an intermediate layer that wraps the content of the whole window and that layer has support for rendering itself into an offscreen bitmap

Kirill Grouchnikov · Answer

Maybe if your point is that using `ImageComposeScene` needs that intermediate layer somewhere in your real app see if `renderComposeScene` might fit your needs better

Kirill Grouchnikov · Answer

image png

Arjan van Wieringen · Answer

I ll need to investigate your code better I think What I am searching for is to have a running compose application and have a way to capture the content of a part of the running application into an Image

Arjan van Wieringen · Answer

Eventually I solved it with a simple `ScreenshotContainer` which takes a special state object to trigger screenshots and a content lambda When the screenshot is taken the content lambda is drawn inside an `ImageComposeScrene` which results in

Arjan van Wieringen · Answer

```class ScreenshotState private val trigger = MutableSharedFlow lt Unit gt replay = 1 extraBufferCapacity = 0 onBufferOverflow = BufferOverflow DROP OLDEST val trigger = trigger asSharedFlow private val latestScreenShot = MutableStateFlow lt ImageBitmap gt null val latestScreenShot = latestScreenShot asStateFlow fun takeScreenshot trigger tryEmit Unit fun renderContent width Int height Int density Density content Composable gt Unit val scene = ImageComposeScene width = width height = height density = density content = content latestScreenShot update scene render toComposeImageBitmap Composable fun ScreenshotContainer screenshotState ScreenshotState targetDensity Density = Density 1f content Composable gt Unit val density Density = LocalDensity current var layoutCoordinates LayoutCoordinates by remember mutableStateOf null LaunchedEffect screenshotState screenshotState trigger collect if layoutCoordinates = null val scale = targetDensity density density density screenshotState renderContent width = layoutCoordinates size width scale toInt height = layoutCoordinates size height scale toInt density = targetDensity content = content Box modifier = Modifier onGloballyPositioned actualLayoutCoordinates gt layoutCoordinates = actualLayoutCoordinates content ```