如何实现类似Instagram头像的圆形图片裁剪功能？

一、现成开源库方案 #

很多主流图片裁剪库其实支持圆形裁剪，只是需要开启对应配置：

• uCrop（Android）：默认是矩形裁剪，但通过配置可实现圆形效果。在初始化UCrop时，添加以下设置：

  UCrop.of(sourceUri, destinationUri)
      .setCircleDimmedLayer(true) // 开启圆形遮罩层
      .setOvalDimmedLayer(true) // 强制裁剪区域为正圆
      .withAspectRatio(1, 1) // 固定1:1比例
      .start(context);
  

• ImageCropper（Flutter）：直接配置圆形裁剪模式即可：

  final croppedFile = await ImageCropper().cropImage(
    sourcePath: imagePath,
    aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1),
    cropStyle: CropStyle.circle, // 开启圆形裁剪
  );
  

• TZImagePickerController（iOS）：集成裁剪功能时，设置allowCrop = YES并指定cropStyle = TZImagePickerCropStyleCircle即可实现圆形裁剪。

二、自定义实现方案 #

如果不想依赖第三方库，可手动实现圆形裁剪逻辑：

Android 示例代码

通过BitmapShader和PorterDuffXfermode实现圆形裁剪：

public Bitmap cropToCircle(Bitmap originalBitmap) {
    int size = Math.min(originalBitmap.getWidth(), originalBitmap.getHeight());
    Bitmap squareBitmap = Bitmap.createBitmap(originalBitmap, 
        (originalBitmap.getWidth() - size) / 2, 
        (originalBitmap.getHeight() - size) / 2, 
        size, size);
    Bitmap circleBitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(circleBitmap);
    
    Paint paint = new Paint();
    BitmapShader shader = new BitmapShader(squareBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
    paint.setShader(shader);
    paint.setAntiAlias(true);
    
    float center = size / 2f;
    canvas.drawCircle(center, center, center, paint);
    return circleBitmap;
}

iOS 示例代码

使用CAShapeLayer给UIImageView添加圆形遮罩：

func cropImageToCircle(_ image: UIImage) -> UIImage? {
    let size = CGSize(width: min(image.size.width, image.size.height), height: min(image.size.width, image.size.height))
    UIGraphicsBeginImageContextWithOptions(size, false, image.scale)
    let context = UIGraphicsGetCurrentContext()
    context?.addEllipse(in: CGRect(origin: .zero, size: size))
    context?.clip()
    image.draw(in: CGRect(origin: .zero, size: size))
    let croppedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return croppedImage
}

注意事项 #

• 若使用库时未找到圆形裁剪选项，优先查看官方文档的配置项，多数库会隐藏这类高级配置在API参数中；
• 自定义裁剪时，建议先将原图裁剪为正方形，再转换为圆形，避免出现拉伸变形。

内容的提问来源于stack exchange，提问作者Souhail Krissaane