如何将图像裁剪成圆形？

Question

我正在尝试将图像裁剪成圆形，圆形外的区域为白色。

新图像的尺寸与原始图像相同，只是有效地将图像变成圆形。

我知道如何使用GDI+裁剪图像，通过将现有图像复制到一个新图像中来绘制矩形/正方形，但我不知道如何用白色填充弧/圆形的外部。

这可能吗？

更新 - 我想在服务器端执行此操作，因为不同的浏览器/平台以不同的方式呈现CSS半径，或者根本不呈现。

我的工作至今为止是：

public static Image CropCircle2(Image imgSource)
    {
        Image imgTarget = new Bitmap(imgSource.Width, imgSource.Height);
        Graphics g = Graphics.FromImage(imgTarget);
        var path = new System.Drawing.Drawing2D.GraphicsPath();
        path.AddEllipse(0, 0, imgTarget.Width, imgTarget.Height);
        g.SetClip(path);
        g.DrawImage(imgSource, 0, 0);

        return imgTarget;
    }

- Sam Jones

---

你知道吗？你可以只用HTML就能做到这个。 - Emre Acar

为什么要关闭投票？请解释一下... - Sam Jones

我不是投票关闭的人，而且在这种情况下我也不会这样做。但通常，“如何...”的问题太宽泛或者提问者表现出的努力太少。我个人认为你的问题还好，因为你至少提供了额外代码可以放置的框架。但需要注意的是，“是否可能”的问题毫无意义，答案几乎总是“是”。标签不应该出现在标题中，它们只属于标签（我特别指的是“使用asp.net”）。 - mason

Answer 1

首先，您需要将背景涂成想要的颜色：

public static Image CropToCircle(Image srcImage, Color backGround)
{
    Image dstImage = new Bitmap(srcImage.Width, srcImage.Height, srcImage.PixelFormat);
    Graphics g = Graphics.FromImage(dstImage);
    using (Brush br = new SolidBrush(backGround)) {
        g.FillRectangle(br, 0, 0, dstImage.Width, dstImage.Height);
    }
    GraphicsPath path = new GraphicsPath();
    path.AddEllipse(0, 0, dstImage.Width, dstImage.Height);
    g.SetClip(path);
    g.DrawImage(srcImage, 0, 0);

    return dstImage;
}

测试代码：

Image srcImage = Bitmap.FromFile(@"..\..\080.jpg");
Image dstImage = CropToCircle(srcImage, Color.CadetBlue);
dstImage.Save(@"..\..\080cropped.jpg", ImageFormat.Jpeg);

输入：

输出：

如果您想使图像的外部透明，则需要将像素格式设置为具有Alpha通道的格式（而不是srcImage的像素格式），并使用包括全透明Alpha的背景颜色。保存时，请确保使用支持Alpha通道的文件格式（例如png）。

- plinth

---

输出图像已经失效。 - Lei Yang

如果有人想要做透明背景：使用位图格式 Drawing.Imaging.PixelFormat.Format32bppArgb 即可。 - K232

圆形裁剪效果不错，但边缘不够平滑。我找到了这个例子，可以产生更平滑的边缘。http://codehunk.com/round-image-corner-in-c/ - nishantvodoo

Answer 2

你可以使用HTML和CSS3来实现这一点。

HTML

<div class="circular"></div>

CSS

.circular {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://link-to-your/image.jpg) no-repeat;
}

因此，对于您的项目，您可以添加一个带有runat="server"属性的div，给它一个CSS类和一个ID，并通过编程方式将背景添加到您想要的那个元素。

C#

yourDiv.Attributes.Add("style", "background: url(" + yourLink + ") no-repeat);

点击此链接查看更多信息。 http://bavotasan.com/2011/circular-images-with-css3/

- CitiZen

---

@Sam Jones，这就是我所说的，但如果您使用border-radius:50％;它会更加灵活，并适用于任何宽度和高度。 - Emre Acar