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

Question

如何在Kotlin Compose桌面应用程序中从远程URL加载图像？

在Android中，使用Coli作为官方示例。

@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)
                )
            }
        }
    )
}

AAR不支持作为桌面应用程序。

- Thomas Liao

Answer 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")
)

- Saurabh Thorat

---

实际上，我正在寻找像Glide或Coli一样的解决方案，用于获取、解码和显示来自远程URL的图像，并具有暂停、恢复等状态。但是感谢@Saurabh Thorat。 - Thomas Liao

请注意，这种方法也适用于非URL文件，因为它使用字节通过Image.makeFromEncoded()进行传输。在我的上下文中，我从JFileChooser获取了一个文件，并以这种方式使用了org.jetbrains.skija.Image。 - Christian Gruber

Answer 2

我发现一个简单的方法是使用ktor以byteArray的形式获取图像，然后使用Kotlin函数makeFromEncoded创建ImageBitmap，然后可以在组合图像中使用它。

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")
}

- James Barfoote

---

不错。谢谢。我必须使用kotlin 1.8.20 compose 1.4.0 kto 2.2.4进行修改suspend fun loadPicture(url: String): ImageBitmap { val httpClient = HttpClient { install(ContentNegotiation) { json(Json { ignoreUnknownKeys = true useAlternativeNames = false }) } } val image: ByteArray = httpClient.use { client -> client.get(url).body() } return Image.makeFromEncoded(image).toComposeImageBitmap() } - Louis GRIGNON

Answer 3

这是我找到的方法。

import androidx.compose.ui.graphics.toComposeImageBitmap
import org.jetbrains.skia.Image
import java.net.URL

fun loadImage(url: String) =
    Image.makeFromEncoded(URL(url).readBytes())
        .toComposeImageBitmap()

- Shaun Wild

Answer 4

这个对我有用。

fun loadImage(url: String): ImageBitmap {
    return ImageIO.read(URL(url)).toComposeImageBitmap()
}

你可以随后使用。

Image(
    bitmap = loadImage(imageUrl),
    contentDescription = null
)

- sayang_android