Could not generate QR code in WasmJS target

[cvicart-dev]

Describe the bug
Could not generate QR code in WasmJS target

To Reproduce

1. Create a KMP project with WasmJS target
2. Add the library
3. Try to generate a QR code with sample text

Expected behavior

The QR code should appears

Screenshots or other QRCodes rendered with other tools

Additional context

• Kotlin: 2.2.0
• Compose Multiplatform: 1.8.2
• qrcode-kotlin: 4.5.0

[g0dkar]

Huh, weird! Thanks for sharing, I'll get to it asap ^^

[bxkr]

@cvicart-dev @cvicart-dev Hi! I figured out a solution to this problem. QRCode.renderToBytes() in this case returns ByteArray of base64 png image with header, so we need to decode this ByteArray to string, remove header at the start of the string and then decode base64 raw data to ByteArray, and then decode it to Compose ImageBitmap.

Here's the working code for Compose Multiplatform targeting WASM (web):

val b64bytes = QRCode.ofSquares().build(YOUR_DATA).renderToBytes()
val b64noHeader = b64bytes.decodeToString().substringAfter("data:image/png;base64,")
val imageBitmap = b64noHeader.decodeBase64Bytes().decodeToImageBitmap()

Image(imageBitmap, null)

[cvicart-dev]

@bxkr Thanks for reporting this workaround !

The code I provided is used in the commonMain source set compiled for Android and WasmJS targets. It works fine on Android, so it would be great to have this implementation to be consistent across platforms.

@g0dkar could you make the change, or better creating a new fonction renderToImageBitmap() that would return a Compose ImageBitmap ?
Thanks !

[cvicart-dev]

@bxkr Thanks for reporting this workaround !

The code I provided is used in the commonMain source set compiled for Android and WasmJS targets. It works fine on Android, so it would be great to have this implementation to be consistent across platforms.

@g0dkar could you make the change, or better creating a new fonction renderToImageBitmap() that would return a Compose ImageBitmap ? Thanks !

@g0dkar Or even better, just had this idea: integrate the library with Compose Painter, and make a function to be able to generate a QR code as a Painter
This way, you don't force the developer to specify the rendered image size, but it is computed by the constraints applied to the Compose Image.

I can help for this if you need to

[g0dkar]

Heya everyone, sorry for the late update.

So far I've implemented a QRCode.renderToPNGImageBitmap() extension function.

As for the Painter support, that is a bit out of the scope for now 😅 - a code contribution for that is very welcome! Specially since I'm not that well versed on Compose (I'm mostly a backend developer haha)

I consider it out of the scope for now because of the need for the Compose library - one of core principles I'm trying to follow is not having external lib requirements.

Having said that, I understand how ubiquitous Compose is on the Android side and I've developed a render solution for Compose there (using this extension function, this object will be used instead of the Bitmap - default one)

Would something like that works? From what I could gather adapting the code on the WASM/JS it seems that it uses the same Compose as Android does (the imports are all import androidx.compose.blablabla)

If so, its quite straightforward for me to implement that - pretty much a copy/paste from the Android implementation.

[cvicart-dev]

Hello @g0dkar !

Thanks for the reply.
That's a good point to keep the library lightweight, and not to depend on external libraries that, moreover, grow up very quickly.
I think you won't have much work to implement this, as Painter uses DrawScope under the hood.

Basically Compose is ported to Wasm/JS keeping the base packages (androidx.compose.***), but some are modified by Jetbrains for specific purpose (org.jetbrains.androidx.compose.***)

What I would recommend, is to create an another library like qrcode-compose-kotlin which would depends on qrcode-kotlin and Compose. This way, you keep the core library as light as possible, but you offer a way to Compose developers to take care only of their Compose Image size, not of the generated QR graphic.

Even if we only focus on Android side, the library could be used on Watches, phones, tablets or event laptops via ChromeOS. All of these are different form factors, so making the developer to specify the generated image size force him to play with density and sizes for each of these form factors.
This issue is solvable directly by making a Painter function accessible as it automatically gives to the DrawScope the right pixel size to use for the screen.