Jetpack Compose中如何裁剪YouTube缩略图移除上下多余黑边

安全阿岳

2026-9-25

解决方案

你遇到的黑边是由于YouTube默认0.jpg缩略图为4:3比例，而16:9的视频内容上下被填充了黑边导致的，有3种实现方式可选：

方案1：比例适配自动裁剪（最推荐，无变形，无需修改URL）

将图片宽高比固定为YouTube视频默认的16:9，配合ContentScale.Crop即可自动裁剪掉上下黑边，代码修改如下：

Image(
    painter = rememberImagePainter("https://img.youtube.com/vi/RS6By_pE7uo/0.jpg"),
    modifier = Modifier
        .width(itemWidth)
        .aspectRatio(16f / 9f), // 固定16:9比例，可替换原来的固定height设置
    contentScale = ContentScale.Crop, // 不要用FillBounds，会导致拉伸变形
    contentDescription = null
)

该方案会自动计算需要裁剪的上下区域，适配不同比例的YouTube缩略图，不会出现内容变形。如果必须固定图片高度为photoImageHeight，可以省略aspectRatio配置，保留height设置搭配ContentScale.Crop也能实现裁剪效果。

方案2：自定义垂直裁剪比例

如果需要手动控制上下裁剪的比例，可以使用Coil自带的CropTransformation实现精确裁剪：

Image(
    painter = rememberImagePainter(
        data = "https://img.youtube.com/vi/RS6By_pE7uo/0.jpg",
        builder = {
            // 上下各裁剪12.5%的高度，刚好去除4:3缩略图的黑边
            transformations(CropTransformation(
                topCropPercent = 0.125f,
                bottomCropPercent = 0.125f
            ))
        }
    ),
    modifier = Modifier
        .width(itemWidth)
        .height(photoImageHeight),
    contentScale = ContentScale.Fit,
    contentDescription = null
)