Is there a simple way to convert a Bitmap to a Compose ImageBitmap?

[sproctor]

I'm trying to display a Bitmap in a Compose app.

I'm in the process of adding a JS target to a multiplatform library (https://github.com/sproctor/SignaturePad/). I currently have a function to convert a Bitmap to ImageBItmap for Android and JVM, but JS looks more difficult as there doesn't seem to be a simple interim format.

Do you know how to accomplish this? Or is there a simple way to display a Bitmap in a Compose app?

[soywiz]

Well, KorIM supports converting bitmaps to Bitmap32 with RGBA pixels, so you can do whatever is needed.

In the case of JS I'm not sure, but it is possible to generate an URL for passing to a <img> with HtmlNativeImage .toDataURL:

korge/korim/src/jsMain/kotlin/com/soywiz/korim/format/NativeImageFormatProviderJs.kt

Line 118 in ccb4d13

fun toDataURL(type: String = "image/png", quality: Double? = null): String = lazyCanvasElement.toDataURL(type, quality)

You can also use Blob to generate shorter URLs:

korge/korim/src/jsMain/kotlin/com/soywiz/korim/format/NativeImageFormatProviderJs.kt

Lines 187 to 196 in ccb4d13

	suspend fun decodeToCanvas(bytes: ByteArray, props: ImageDecodingProps = ImageDecodingProps.DEFAULT): HTMLCanvasElementLike {
	if (OS.isJsNodeJs) error("Canvas not available on NodeJS")
	val blob = Blob(arrayOf(bytes), BlobPropertyBag(type = "image/png"))
	val blobURL = URL.createObjectURL(blob)
	try {
	return loadCanvas(blobURL)
	} finally {
	URL.revokeObjectURL(blobURL)
	}
	}

But you will need to revoke them later as in the snippet.

[sproctor]

Thanks. For my application, the image is being displayed using the Image function from Compose. I think the my best way forward is to write a Compose ImageBitmap wrapper for Bitmap32. That might perform better on every target, actually. When I have something working, I'll post it here.

[sproctor]

Nope, that wasn't a good idea. It's not supported on Android or JVM. Next try: writing a Painter for Bitmap32.

[sproctor]

Ok, writing a painter looked complicated. I opted for what appeared to be the easiest: convert a Korim Bitmap to a Skia Bitmap.

Here's the result:

import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.asComposeImageBitmap
import com.soywiz.korim.bitmap.Bitmap
import com.soywiz.korim.bitmap.Bitmap32
import org.jetbrains.skia.ColorAlphaType
import org.jetbrains.skia.ColorInfo
import org.jetbrains.skia.ColorType
import org.jetbrains.skia.ImageInfo

internal actual fun Bitmap.toComposeImageBitmap(): ImageBitmap {
    return toBMP32IfRequired().toSkiaBitmap().asComposeImageBitmap()
}

internal fun Bitmap32.toSkiaBitmap(): org.jetbrains.skia.Bitmap {
    val colorType = ColorType.N32
    val alphaType = if (premultiplied) ColorAlphaType.PREMUL else ColorAlphaType.OPAQUE
    val skiaColorSpace = null
    val colorInfo = ColorInfo(colorType, alphaType, skiaColorSpace)
    val imageInfo = ImageInfo(colorInfo, width, height)
    val bitmap = org.jetbrains.skia.Bitmap()
    val pixels = extractBytes()
    bitmap.allocPixels(imageInfo)
    bitmap.installPixels(pixels)
    return bitmap
}

[sproctor]

This works in my particular use case. I don't know if the alpha/premultiplied logic is correct, I don't know about the ColorSpace either.

[7va]

I had the similar problem and better way that i found in Compose examples. ByteArray -> ImageBitmap