Hey , anyone have a good image loading library like Coil that supports compose canvas for web?

did you try to load into the coil painter and then use it with built-in

Image

composable?

i dont believe coil is set up for multiplatform

Yeah, Coil depends on Android/JVM-specifc APIs, and I don’t think there’s any plan to make it support multiplatform. There was a thread the other day discussing image loaders for Compose Desktop, but I’m not sure if any of them support JS targets for Web usage https://kotlinlang.slack.com/archives/C01D6HTPATV/p1660433149092459

@Casey Brooks Could you elaborate on that a little bit more? E.g., how do you get the JS Image into the Compose world as an ImageBitmap? This is probably not an issue in the Compose/DOM world.

I haven’t tried specifically with Web using the Material Canvas target, I’m using Web with DOM to create regular HTML. But here’s the full function where I’m fetching an image to draw it manually to a standard HTML `<canvas>`:

@Composable
fun ComposableCanvas(
    backgroundImageUrl: String,
    vararg keys: Any?,
    onDraw: CanvasRenderingContext2D.(width: Double, height: Double) -> Unit
) {
    val imageBitmap: Image? by produceState<Image?>(null, backgroundImageUrl) {
        // I had to use a `callbackFlow` here because of a weird scoping issue where I couldn't assign `.value = ` from the callback as normal
        val flow = callbackFlow<Image?> {
            val image = Image()
            image.src = backgroundImageUrl
            image.onload = { trySend(image) }
            awaitClose { image.onload = null }
        }

        flow
            .onEach { value = it }
            .launchIn(this)
    }
    var canvasEl: HTMLCanvasElement? by remember { mutableStateOf(null) }
    var drawScope: CanvasRenderingContext2D? by remember { mutableStateOf(null) }

    LaunchedEffect(drawScope, imageBitmap, canvasEl, *keys) {
        imageBitmap?.let { bmp ->
            canvasEl?.let { canvas ->
                drawScope?.apply {
                    canvas.width = bmp.naturalWidth
                    canvas.height = bmp.naturalHeight
                    drawImage(bmp, 0.0, 0.0, bmp.width.toDouble(), bmp.height.toDouble())
                    onDraw(canvas.width.toDouble(), canvas.height.toDouble())
                }
            }
        }
    }

    Canvas(
        {
            ref {
                canvasEl = it
                drawScope = it.getContext("2d") as CanvasRenderingContext2D

                onDispose {
                    canvasEl = null
                    drawScope = null
                }
            }
        }
    )
}

Interesting that you call the value

imageBitmap

although it actually is just a JS Image 😉. But I guess in a real Compose Canvas-Web application you also want to render into your Compose Canvas.

This is the first time I’ve tried working with an HTML canvas, and I’m sure there are things to be improved here.

imageBitmap

in that snippet is this, which is both a bitmap, but also an HTML node, I guess? JS makes no sense.

Yes, JS is the wrong term. It should have been HTML, which I actually meant 😉 I obviously associate JS with HTML/Browser usage too much 🙃.

this worked! thank you. will def work around cleaning it up later, but im doing a hackathon , so good enough!