如何在Android中从位图裁剪圆形区域

Answers:

216

经过长时间的头脑风暴，我找到了解决方案

public Bitmap getCroppedBitmap(Bitmap bitmap) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
            bitmap.getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    // canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
    canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2,
            bitmap.getWidth() / 2, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);
    //Bitmap _bmp = Bitmap.createScaledBitmap(output, 60, 60, false);
    //return _bmp;
    return output;
}
— 阿尔塔夫
source
1
您还可以通过针对圆形剪切路径剪切位图来完成此操作。您可以在每次绘制位图时执行此操作，这意味着您实际上不会创建具有透明像素的位图，也可以将剪切的位图绘制到事先已擦除为透明的缓冲区中。我认为任何一个都比这更快和​​更简单。
— 基因
1
谢谢。您的代码效果惊人。现在我也可以使用路径（多边形）进行裁剪。
— DearDhruv 2013年
2
该方法可以static在类似静态方法的非实例化实用程序类中进行制造和使用。
— 马特·洛根
1
您不应该在这里使用高度和宽度除以2的最小值作为半径吗？canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getWidth() / 2, paint);
— Varvara Kalinina
3
这里有3个关键点：1）创建一个空的位图并绘制一个圆。2）将xfermode设置为SRC_IN。3）将实际位图绘制到该画布边界。因此，油漆颜色和其他画布绘制都没有用。
— Lym Zoy
44

从矩形生成圆

public static Bitmap getCircularBitmap(Bitmap bitmap) {
    Bitmap output;

    if (bitmap.getWidth() > bitmap.getHeight()) {
        output = Bitmap.createBitmap(bitmap.getHeight(), bitmap.getHeight(), Config.ARGB_8888);
    } else {
        output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getWidth(), Config.ARGB_8888);
    }

    Canvas canvas = new Canvas(output);

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());

    float r = 0;

    if (bitmap.getWidth() > bitmap.getHeight()) {
        r = bitmap.getHeight() / 2;
    } else {
        r = bitmap.getWidth() / 2;
    }

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawCircle(r, r, r, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);
    return output;
}
— 柴油机
source
1
我建议在框架布局中使用两个imageviews，顶部imageview切出透明圆圈。
— 柴油
36

您可以使用RoundedBitmapDrawable使imageview 变为圆形

这是实现roundedImageview的代码：

ImageView profilePic=(ImageView)findViewById(R.id.user_image);

//get bitmap of the image
Bitmap imageBitmap=BitmapFactory.decodeResource(getResources(),  R.drawable.large_icon);
RoundedBitmapDrawable roundedBitmapDrawable=RoundedBitmapDrawableFactory.create(getResources(), imageBitmap);

//setting radius
roundedBitmapDrawable.setCornerRadius(50.0f);
roundedBitmapDrawable.setAntiAlias(true);
profilePic.setImageDrawable(roundedBitmapDrawable);
— sree
source
感谢您展示此v4支持库选项。我想我不会发现其他情况。
— CFJ90210
8
并使用setCircular（true）代替setCornerRadius（50.0f）使可绘制对象变成一个圆形。注意：图像必须为正方形或长宽比有缺陷...
— Marco Schmitz
31

@Gene在上面的答案上发表了评论，建议将其clipPath用作将图像裁剪为圆形的选项。

以下是此的干净实现：

    public static Bitmap GetBitmapClippedCircle(Bitmap bitmap) {

        final int width = bitmap.getWidth();
        final int height = bitmap.getHeight();
        final Bitmap outputBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);

        final Path path = new Path();
        path.addCircle(
                  (float)(width / 2)
                , (float)(height / 2)
                , (float) Math.min(width, (height / 2))
                , Path.Direction.CCW);

        final Canvas canvas = new Canvas(outputBitmap);
        canvas.clipPath(path);
        canvas.drawBitmap(bitmap, 0, 0, null);
        return outputBitmap;
    }

可以将其添加到实用程序类。

— HGPB
source
4
我正要发布非常相似的代码。根据developer.android.com/guide/topics/graphics/hardware-accel.html的说明，硬件加速不支持clipPath。我实际上在一个应用程序中遇到了这个问题，想知道发生了什么。但是，较新的硬件似乎可以解决此问题（例如Google平板电脑）。对代码的一种可能的进一步清除：绘制位图时，不需要rect-to-rect转换。您可以说c.drawBitmap(b, 0, 0, null);，它使用默认的标识转换。
— 基因
在使用硬件加速时如何使用clipPath？
— speedynomads
以前我最初使用此解决方案，但输出具有锯齿状边缘。@Altaf提供的解决方案效果更好
— dirkoneill 2014年
非常适合裁剪状态栏通知中使用的图像
— Damian Petla
14

我认为此解决方案适用于任何类型的矩形，如果要缩小或放大图像，请更改像素大小：

public static Bitmap getCircleBitmap(Bitmap bm) {

        int sice = Math.min((bm.getWidth()), (bm.getHeight()));

        Bitmap bitmap = ThumbnailUtils.extractThumbnail(bm, sice, sice);

        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(output);

        final int color = 0xffff0000;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);

        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setFilterBitmap(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawOval(rectF, paint);

        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth((float) 4);
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return output;
    }
— Jachumbelechao到Mantekilla
source
11

这也可以在xml中轻松完成，而无需裁剪实际的位图。您只需要创建一个圆形图像蒙版并将其放置在实际图像上即可。这是我使用的一段代码：

circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <gradient android:startColor="#00FFFFFF" android:endColor="#00FFFFFF"
        android:angle="270"/>
     <stroke android:width="10dp" android:color="#FFAAAAAA"/>

your_layout.xml（如果不需要，请忽略“ android：scaleType =“ fitXY”“）

<RelativeLayout

        android:id="@+id/icon_layout"
        android:layout_width="@dimen/icon_mask"
        android:layout_height="@dimen/icon_mask"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >

        <ImageView
            android:id="@+id/icon"
            android:layout_width="@dimen/icon"
            android:layout_height="@dimen/icon"
            android:layout_centerInParent="true"
            android:scaleType="fitXY" >
        </ImageView>

        <ImageView
            android:id="@+id/icon_mask"
            android:layout_width="@dimen/icon_mask"
            android:layout_height="@dimen/icon_mask"
            android:layout_centerInParent="true"
            android:background="@drawable/circle"
            android:scaleType="fitXY" >
        </ImageView>
    </RelativeLayout>

dimen.xml

<dimen name="icon">36dp</dimen>
<dimen name="icon_mask">55dp</dimen>

在此处输入图片说明

输出图像视图：

希望，这可能对某人有用！！！:)

— 灰
source
似乎只有在图像的透明背景小于圆圈的情况下它
— 才起作用
4
您只是将ImageView放在另一个之上，这不是蒙版:)
— 爬升
@Ash确定，您是对的：)我只是这样，您就不会按照原始海报的要求真正“裁剪”原始图像；）
— 攀登
8

您可以使用此代码，它将起作用

 private Bitmap getCircleBitmap(Bitmap bitmap) {
        final Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
                bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        final Canvas canvas = new Canvas(output);

        final int color = Color.RED;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawOval(rectF, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        bitmap.recycle();

        return output;
    }
它在<28的Android API上运行良好，但与java.lang.IllegalArgumentException一起崩溃：软件渲染不支持Android 28上的硬件位图
— Lucian Iacob
7

您可以使用此代码，它将起作用

public Bitmap getRoundedShape(Bitmap scaleBitmapImage) {
    int targetWidth = 110;
    int targetHeight = 110;
    Bitmap targetBitmap = Bitmap.createBitmap(targetWidth, 
            targetHeight,Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(targetBitmap);
    Path path = new Path();
    path.addCircle(((float) targetWidth - 1) / 2,
            ((float) targetHeight - 1) / 2,
            (Math.min(((float) targetWidth), 
                    ((float) targetHeight)) / 2),
                    Path.Direction.CCW);

    canvas.clipPath(path);
    Bitmap sourceBitmap = scaleBitmapImage;
    canvas.drawBitmap(sourceBitmap, 
            new Rect(0, 0, sourceBitmap.getWidth(),
                    sourceBitmap.getHeight()), 
                    new Rect(0, 0, targetWidth, targetHeight), new Paint(Paint.FILTER_BITMAP_FLAG));
    return targetBitmap;
}
— 阿努帕姆·夏尔马
source
3

我建议添加，bitmap.recycle()如果您不再需要它，它将防止OutOfMemory错误。

— Badoualy
source
3

这是使用扩展方法的Kotlin变体

/**
 * Creates new circular bitmap based on original one.
 */
fun Bitmap.getCircularBitmap(config: Bitmap.Config = Bitmap.Config.ARGB_8888): Bitmap {
    // circle configuration
    val circlePaint = Paint().apply { isAntiAlias = true }
    val circleRadius = Math.max(width, height) / 2f

    // output bitmap
    val outputBitmapPaint = Paint(circlePaint).apply { xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN) }
    val outputBounds = Rect(0, 0, width, height)
    val output = Bitmap.createBitmap(width, height, config)

    return Canvas(output).run {
        drawCircle(circleRadius, circleRadius, circleRadius, circlePaint)
        drawBitmap(this@getCircularBitmap, outputBounds, outputBounds, outputBitmapPaint)
        output
    }
}
— 尤里（Yuriy Seredyuk）
source
2

对于想要矩形（me）中心的豌豆，在切割前将其添加：

    public static Bitmap cropBitmapToBlock(Bitmap bitmap) {
    if (bitmap.getWidth() >= bitmap.getHeight()){
        return Bitmap.createBitmap(
                bitmap,
                bitmap.getWidth()/2 - bitmap.getHeight()/2,
                0,
                bitmap.getHeight(),
                bitmap.getHeight()
        );
    }else{
        return Bitmap.createBitmap(
                bitmap,
                0,
                bitmap.getHeight()/2 - bitmap.getWidth()/2,
                bitmap.getWidth(),
                bitmap.getWidth()
        );
    }
}

Android Crop Center的位图

— 乔伯特
source
2

基于[Jachumbelechao Unto Mantekilla]的答案，此代码对于正在寻找Kotlin解决方案的人们来说就像一个魅力：

fun cropCircleFromBitmap(originalBitmap: Bitmap): Bitmap {
    val size = Math.min(originalBitmap.width, originalBitmap.height)
    val bitmap = ThumbnailUtils.extractThumbnail(originalBitmap, size, size)
    var output = Bitmap.createBitmap(bitmap.width, bitmap.height, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(output)
    val paint = Paint()
    val rect = Rect(0, 0, bitmap.width, bitmap.height)
    val rectF = RectF(rect)
    paint.isAntiAlias = true
    paint.isDither = true
    paint.isFilterBitmap = true
    canvas.drawARGB(0, 0, 0, 0)
    paint.color = 0xffff0000.toInt()
    canvas.drawOval(rectF, paint)
    paint.color = Color.BLUE
    paint.style = Paint.Style.STROKE
    paint.strokeWidth = 4f
    paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
    canvas.drawBitmap(bitmap, rect, rect, paint)
    return output
}
— 罗德里戈·萨利纳斯（Rodrigo Salinas）
source
您可以将其转换为扩展功能
— greenspand
像有趣的东西Bitmap.getCircleCroppedBitmap（）：位图{}并使用它代替originalBitmap
— greenspand
那么你可以使用这样的：img_user_photo.setImageBitmap（photo.getCircleCroppedBitmap（））
— greenspand
其中photo是使用功能扩展的位图对象
— greenspand
1

现在，正确答案：

private Bitmap getCroppedBitmap(Bitmap bitmap, Integer cx, Integer cy, Integer radius) {
    int diam = radius << 1;
    Bitmap targetBitmap = Bitmap.createBitmap(diam, diam, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(targetBitmap);
    final int color = 0xff424242;
    final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawCircle(radius, radius, radius, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, -cx+radius, -cy+radius, paint);
    return targetBitmap;
}
— 主
source
1
什么是cx和cy？
— 卡蒂克·楚
1
@ K_7，这是一个圆的中心
— 大师
1

科丁功能

 fun getRoundedCornerBitmap(bitmap: Bitmap, pixels: Int): Bitmap {
            val output = Bitmap.createBitmap(bitmap.width, bitmap.height, Bitmap.Config.ARGB_8888)
            val canvas = Canvas(output)

            val color = -0xbdbdbe
            val paint = Paint()
            val rect = Rect(0, 0, bitmap.width, bitmap.height)
            val rectF = RectF(rect)
            val roundPx = pixels.toFloat()

            paint.isAntiAlias = true
            canvas.drawARGB(0, 0, 0, 0)
            paint.color = color
            canvas.drawRoundRect(rectF, roundPx, roundPx, paint)

            paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
            canvas.drawBitmap(bitmap, rect, rect, paint)

            return output
        }

通过此代码调用

 holder.itemFriendImage.setImageBitmap(ImageConverter.getRoundedCornerBitmap(bitmap,600))
— 沙美岛ÖZTOPRAK
source
1

我相信最简单的解决方案是创建您的Bitmap的BitmapShader，将其传递给绘画对象，然后简单地调用canvas.drawCircle（cx，cy，radius，paint）之类的东西；

例如

Paint p = new Paint();
p.setShader(new BitmapShader(myBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
canvas.drawCircle(getWidth() / 2, getHeight() / 2, getHeight() / 2, p);

这是怎么https://github.com/hdodenhof/CircleImageView也做到了，你可以在这里阅读源代码： https://github.com/hdodenhof/CircleImageView/blob/master/circleimageview/src/main/java /de/hdodenhof/circleimageview/CircleImageView.java

— 马丁·诺沃萨德（Martin Nowosad）
source
0 
**Jst Add this to your image Id and get the circuler image.**

 imgUserProfile.setImageBitmap(getCircularCenterCropBitmap(bitmap, (int) (150 * denisty)));

Method:-

public void Bitmap getCircularCenterCropBitmap(Bitmap originalBmp, int diameter) {
        Bitmap resizedBmp = BitmapUtils.getScaledCroppedBitmap(originalBmp, diameter, diameter);
        return BitmapUtils.getRoundedCircularBitmap(resizedBmp, diameter / 2);
    }
— 阿洛克·辛格
source
-1

不确定这是一个编程问题，但是...

最简单的解决方案是在源位图中使外部区域透明。否则，您将必须计算哪些像素不在圆内，并相应地设置Alpha（对于完全透明，Alpha = 0）。

— 曼迪沙
source
老实说，我一直是你的方式，这似乎行得通，但我们不能解决边界锯齿问题，不是吗？
— 2014年
通过抖动和/或抗锯齿处理边界“锯齿状”。您可以在网上寻找一些算法来完成似乎可以接受的事情。但是请记住，矩形像素和曲线将始终存在这些问题。
— MandisaW 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.