如何在 Kotlin Compose 桌面中从远程 url 加载图像？答案

【问题标题】：How to load image from remote url in Kotlin Compose desktop?如何在 Kotlin Compose 桌面中从远程 url 加载图像？
【发布时间】：2021-05-06 05:15:57
【问题描述】：

如何在 Kotlin Compose 桌面中从远程 url 加载图像？

在 Android 中，它使用大肠杆菌作为官方示例

@Composable
fun NetworkImage(
    url: String,
    modifier: Modifier = Modifier,
    contentScale: ContentScale = ContentScale.Crop,
    placeholderColor: Color? = MaterialTheme.colors.compositedOnSurface(0.2f)
) {
    CoilImage(
        data = url,
        modifier = modifier,
        contentScale = contentScale,
        loading = {
            if (placeholderColor != null) {
                Spacer(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(placeholderColor)
                )
            }
        }
    )
}

bu作为桌面应用，不支持aar。

【问题讨论】：

标签： android-jetpack-compose compose-desktop

【解决方案1】：

使用javax.imageio.ImageIO从网络加载图片：

import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.asImageBitmap
import org.jetbrains.skija.Image
import java.io.ByteArrayOutputStream
import java.net.HttpURLConnection
import java.net.URL
import javax.imageio.ImageIO

fun loadNetworkImage(link: String): ImageBitmap {
    val url = URL(link)
    val connection = url.openConnection() as HttpURLConnection
    connection.connect()

    val inputStream = connection.inputStream
    val bufferedImage = ImageIO.read(inputStream)

    val stream = ByteArrayOutputStream()
    ImageIO.write(bufferedImage, "png", stream)
    val byteArray = stream.toByteArray()

    return Image.makeFromEncoded(byteArray).asImageBitmap()
}

然后将其用作：

Image(
    bitmap = loadNetworkImage("Your image link")
)

【讨论】：

实际上，我找到了像 Glide 或 Coli 一样的解决方案，用于从远程 url 获取、解码和显示图像，并具有暂停、恢复等状态，但是感谢 @Saurabh胸
注意，这也适用于不是来自 URL 的文件，因为它使用字节通过 Image.makeFromEncoded() 进行管道传输。在我自己的上下文中，我从 JFileChooser 获取文件，并以这种方式使用 org.jetbrains.skija.Image。

【解决方案2】：

我发现一个简单的方法是使用 ktor 将图像作为 byteArray 获取，然后使用 Kotlin 函数 makeFromEncoded 创建一个 ImageBitmap，然后可以在 Composable Image 中使用它

suspend fun loadPicture(url: String): ImageBitmap {
    val image = ktorHttpClient.use { client ->
        client.get<ByteArray>(url)
    }
    return Image.makeFromEncoded(image).asImageBitmap()
}

然后在你的可组合中

if (imageBitmap != null) {
    Image(bitmap = imageBitmap, "content description")
}

【讨论】：