I want to set an `<image>` a JPG I generated...

# webassembly

[Stefan Oltmann]

I want to set an <image> a JPG I generated in my WebAssembly.

Using ChatGPT I got as far as the code below, but I don't understand how I can convert my ByteArray (containing JPG bytes) to a Blob that the HTMLImageElement will accept.

htmlImageElement?.let { imageElement ->

    metadata.getExifThumbnailBytes()?.let { imageBytes ->

        val uint8Array: Uint8Array = imageBytes.toUint8Array()

        val blob = Blob(
            arrayOf(uint8Array), // FIXME
            BlobPropertyBag("image/jpeg")
        )

        val url = URL.Companion.createObjectURL(blob)

        imageElement.src = url
    }
}

[Robert Jaros]

Kotlin/Wasm doesn't support standard Kotlin array types in external declarations. You need to create a JsArray object.

[Stefan Oltmann]

How can I convert my ByteArray into a JsArray?

[Robert Jaros]

The Blob constructor first parameter is a single element array of bytearrays. So you have to create two arrays.

[Robert Jaros]

I'm not sure what is your Uint8Array - if it's external type you don't have to convert it.

[Robert Jaros]

Is it org.khronos.webgl.Uint8Array ?

[Stefan Oltmann]

It's org.khronos.webgl.Uint8Array

https://github.com/StefanOltmann/MetadataViewer/blob/00275dbead1c410677d6cf77ab97810dcbed66ff/app/src/wasmJsMain/kotlin/main.kt#L53

[Robert Jaros]

If so, it is external.

[Stefan Oltmann]

I converted it because I assumed Blob will need that.

[Robert Jaros]

I would try adding similar function:

fun<T: JsAny> jsArrayOf(vararg elements: T): JsArray<T> {
    val array = JsArray<T>()
    for (i in elements.indices) {
        array[i] = elements[i]
    }
    return array
}

[Robert Jaros]

And then use jsArrayOf(uint8Array) as Blob parameter

[Stefan Oltmann]

🎉 And that's the correct solution 😄

[Stefan Oltmann]

Thank you. 🙏

[Stefan Oltmann]

https://stefanoltmann.github.io/MetadataViewer/ is now capable of displaying the embedded thumbnail. 🎉

[Michael Paus]

The correct link now probably is https://stefanoltmann.github.io/exif-viewer/

[Stefan Oltmann]

Yes, thank you.