Develop Reference

C# .net Core rounded corners for image

I save images from social networks and I want to do rounded corners for image and save it to the database. For example, I got a photo from the facebook by url on my Api and I want to process this image
How it possible on .net Core
Below, what results I expect
Image before:
Image after:

You can use SixLabors.ImageSharp library, it is available for .NET Core:
PM > Install-Package SixLabors.ImageSharp
Here is the sample code:
public static void ApplyRoundedCorners(Image<Rgba32> img, float cornerRadius)
{
IPathCollection corners = BuildCorners(img.Width, img.Height, cornerRadius);
var graphicOptions = new GraphicsOptions(true) { BlenderMode = PixelBlenderMode.Src };
img.Mutate(x => x.Fill(graphicOptions, Rgba32.Transparent, corners));
}
public static IPathCollection BuildCorners(int imageWidth, int imageHeight, float cornerRadius)
{
var rect = new RectangularPolygon(-0.5f, -0.5f, cornerRadius, cornerRadius);
IPath cornerToptLeft = rect.Clip(new EllipsePolygon(cornerRadius - 0.5f, cornerRadius - 0.5f, cornerRadius));
var center = new Vector2(imageWidth / 2F, imageHeight / 2F);
float rightPos = imageWidth - cornerToptLeft.Bounds.Width + 1;
float bottomPos = imageHeight - cornerToptLeft.Bounds.Height + 1;
IPath cornerTopRight = cornerToptLeft.RotateDegree(90).Translate(rightPos, 0);
IPath cornerBottomLeft = cornerToptLeft.RotateDegree(-90).Translate(0, bottomPos);
IPath cornerBottomRight = cornerToptLeft.RotateDegree(180).Translate(rightPos, bottomPos);
return new PathCollection(cornerToptLeft, cornerBottomLeft, cornerTopRight, cornerBottomRight);
}
private static IImageProcessingContext<Rgba32> ConvertToAvatar(this IImageProcessingContext<Rgba32> processingContext, Size size, float cornerRadius)
{
return processingContext.Resize(new ResizeOptions
{
Size = size,
Mode = ResizeMode.Crop
}).Apply(i => ApplyRoundedCorners(i, cornerRadius));
}
And you can use it like this:
using (var img = Image.Load("fb.jpg"))
{
using (Image<Rgba32> destRound = img.Clone(x => x.ConvertToAvatar(new Size(200, 200), 100)))
{
destRound.Save("output/fb-round.png");
}
}
More examples can be found here.

translate CGContext generating image method from ios to mac

Is anyone able to help me translate this method in ios to mac version? Code is written in C# in Xamarin
public static UIImage GetImageFromColor(UIColor color, float borderWidth = 1.0f)
{
var rect = new CGRect(0.0f, 0.0f, borderWidth, borderWidth);
UIGraphics.BeginImageContext(rect.Size);
var context = UIGraphics.GetCurrentContext();
context.SetFillColor(color.CGColor);
context.FillRect(rect);
var image = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return image.CreateResizableImage(new UIEdgeInsets(1.0f, 1.0f, 1.0f, 1.0f));
}

UIGraphics.BeginImageContext translates to a CGBitmapContext (or CGContext depending upon what you need).
So to fill a CGBitmapContext with a color:
var size = new CGSize(width, height);
var rect = new CGRect(new CGPoint(), size);
NSImage image;
using (var context = new CGBitmapContext(IntPtr.Zero, width, height, 8, width * 4, NSColorSpace.GenericRGBColorSpace.ColorSpace, CGImageAlphaInfo.PremultipliedFirst))
{
context.SetFillColor(NSColor.Red.CGColor);
context.FillRect(rect);
using (var cgImage = context.ToImage())
{
image = new NSImage(cgImage, size);
}
}
Note: You should use using or make sure that you Dispose of the context and CGImage to avoid a memory leak

This is not a translation from the code you posted but it does exactly the same job:
public static NSImage GetImageFromColor (NSColor color, float borderWidth = 1.0f)
{
var image = new NSImage (new CGSize (borderWidth, borderWidth));
image.LockFocus ();
color.DrawSwatchInRect (new CGRect (new CGPoint (0, 0), image.Size));
image.UnlockFocus ();
return image;
}
Hope this helps.-

Resize an image to fill a picture box without stretching

I was wanting to get an image to fill a picture box, but not leaving any whitespace. Thus cutting off parts of the image to fit when its not resized to the aspect ratio of the pictureBox. And to adjust as the user resizes the window/pictureBox. The existing options, Sizemode = Zoom leaves whitespace, as its afraid to cut off any of the image and Sizemode = StretchImage stretches the image, distorting it.
The only way I can think of doing this is creating an algorithm to resize the image, keeping the contrast ratio, and setting the width or length of the image to the pictureBox width or length and creating some runtime loop which runs the algorithm once a frame. It seems kind of performance heavy for what it does and kind of hackish. Is there a better option?
Edit:
For anyone coming by, I implemented Ivan Stoev's solution slightly differently:
class ImageHandling
{
public static Rectangle GetScaledRectangle(Image img, Rectangle thumbRect)
{
Size sourceSize = img.Size;
Size targetSize = thumbRect.Size;
float scale = Math.Max((float) targetSize.Width / sourceSize.Width, (float) targetSize.Height / sourceSize.Height);
var rect = new RectangleF();
rect.Width = scale * sourceSize.Width;
rect.Height = scale * sourceSize.Height;
rect.X = (targetSize.Width - rect.Width) / 2;
rect.Y = (targetSize.Height - rect.Height) / 2;
return Rectangle.Round(rect);
}
public static Image GetResizedImage(Image img, Rectangle rect)
{
Bitmap b = new Bitmap(rect.Width, rect.Height);
Graphics g = Graphics.FromImage((Image) b);
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.DrawImage(img, 0, 0, rect.Width, rect.Height);
g.Dispose();
try
{
return (Image)b.Clone();
}
finally
{
b.Dispose();
b = null;
g = null;
}
}
public Form1()
{
InitializeComponent();
updateMainBackground();
}
void updateMainBackground()
{
Image img = Properties.Resources.BackgroundMain;
Rectangle newRect = ImageHandling.GetScaledRectangle(img, mainBackground.ClientRectangle);
mainBackground.Image = ImageHandling.GetResizedImage(img, newRect);
}
private void Form1_Resize(object sender, EventArgs e)
{
updateMainBackground();
}
}

If I understand correctly, you are seeking for a "Fill" mode (similar to Windows background picture). There is no standard way of doing that, but it's not so hard to make your own with the help of a small calculation and GDI+:
using System;
using System.Drawing;
using System.IO;
using System.Net;
using System.Windows.Forms;
namespace Samples
{
public class ImageFillBox : Control
{
public ImageFillBox()
{
SetStyle(ControlStyles.Selectable | ControlStyles.SupportsTransparentBackColor, false);
SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.Opaque | ControlStyles.UserPaint | ControlStyles.ResizeRedraw, true);
}
private Image image;
public Image Image
{
get { return image; }
set
{
if (image == value) return;
image = value;
Invalidate();
}
}
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
if (image == null)
e.Graphics.Clear(BackColor);
else
{
Size sourceSize = image.Size, targetSize = ClientSize;
float scale = Math.Max((float)targetSize.Width / sourceSize.Width, (float)targetSize.Height / sourceSize.Height);
var rect = new RectangleF();
rect.Width = scale * sourceSize.Width;
rect.Height = scale * sourceSize.Height;
rect.X = (targetSize.Width - rect.Width) / 2;
rect.Y = (targetSize.Height - rect.Height) / 2;
e.Graphics.DrawImage(image, rect);
}
}
}
static class Test
{
static void Main()
{
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
var testForm = new Form();
testForm.Controls.Add(new ImageFillBox
{
Dock = DockStyle.Fill,
Image = GetImage(#"http://www.celebrityrockstarguitars.com/rock/images/Metall_1.jpg")
});
Application.Run(testForm);
}
static Image GetImage(string path)
{
var uri = new Uri(path);
if (uri.IsFile) return Image.FromFile(path);
using (var client = new WebClient())
return Image.FromStream(new MemoryStream(client.DownloadData(uri)));
}
}
}

According to the PictureBoxSizeMode documentation you can specify PictureBoxSizeMode.Zoom to get the image to keep its aspect ratio. It will zoom as big as possible without any part of the image overflowing the picture box.
And you can play with the Dock property (setting DockStyle.Full) to get the picture box to resize to the size of its container.

There is a fairly simple solution to this. PictureBox.SizeMode has a few settings that will help us out. Zoom will adjust the image to fit in the box and Normal will place the picture with out resizing. What we will want to do is check the height and width of the image and if it is larger than the PictureBox size we will Zoom, if not, we will place it in with Normal. See below:
if (image.Height > pctbx_ImageRecognition.Height || image.Width > pctbx_ImageRecognition.Width)
pctbx_ImageRecognition.SizeMode = PictureBoxSizeMode.Zoom;
else
pctbx_ImageRecognition.SizeMode = PictureBoxSizeMode.Normal;

Resizing and Watermark Image in C#

i want to watermark pictures with different sizes in one folder. the watermark has 3891 x 4118 pixels. the pictures i want to watermark have nearly the same size or way lower.
however, the watermark image should always have the same size on the images. therefore i take the width of image i want to watermark, multiple it by 0.2 (20%) and the height of the watermark image gets calculated by the ratio. (see code below).
after that, i resize the watermark image and put it on on the image i want to watermark. so far so good, but the problem is, that the image is way smaller than it should be. the calculation works fine, even if i say, put the image as is (3891 x 4118 pixel), it calculates it correctly, but the watermark doesn't get bigger. it stays on a size i didn't calulcate.
that's the button to load the folder.
private void DateiLaden_Click(object sender, RoutedEventArgs e)
{
FolderBrowserDialog fbd = new FolderBrowserDialog();
DialogResult result = fbd.ShowDialog();
try
{
string[] files = GetFiles(fbd.SelectedPath.ToString(), "*.jpg|*.jpeg"); //Only select JPG pictures, method below
int anzahlBilder = files.Length;
if (anzahlBilder <= 0)
{
System.Windows.Forms.MessageBox.Show("No images!");
} // if there are no images, stop processing...
else
{
var res = checkImageSize(files); //check if they have a minmal size, method below
if (res == "") //if everythings fine, continue
{
Directory.CreateDirectory(fbd.SelectedPath.ToString() + "\\watermarked"); //create new directory of the selected folder, folder so save the watermarked images
System.Drawing.Image brand = System.Drawing.Image.FromFile("../../watermark.png"); //load watermark
double imageHeightBrand = Convert.ToDouble(brand.Height); //get height (4118px)
double imageWidthBrand = Convert.ToDouble(brand.Width); //get width (3891px)
double ratioBrand = imageWidthBrand / imageHeightBrand; //get ratio (0.94487615347)
foreach (var file in files)
{
System.Drawing.Image img = System.Drawing.Image.FromFile(file); //load image to watermerk to get width and height
double imageHeightBild = Convert.ToDouble(img.Height); //height of the image to watermark
double imageWidthBild = Convert.ToDouble(img.Width); //width of the image to watermark
//Landscape
if (imageWidthBild > 640.0 && imageHeightBild > 425.0)
{
var imageWidthTmpBranding = imageWidthBild * 0.2; //the watermark width, but only 20% size of the image to watermark
var imageHeightTmpBranding = imageWidthTmpBranding / ratioBrand; //height of watermark, preserve aspect ratio
int imageWidthBranding = Convert.ToInt32(imageWidthTmpBranding); //convert in into int32 (see method below)
int imageHeightBranding = Convert.ToInt32(imageHeightTmpBranding); //convert in into int32 (see method below)
var watermark = ResizeImage(brand, imageWidthBranding, imageHeightBranding); //resize temporally the watermark image, method below
System.Drawing.Image image = System.Drawing.Image.FromFile(file); //get image to watermark
Graphics g = Graphics.FromImage(image); //load is as graphic
g.DrawImage(watermark, new System.Drawing.Point(50, 50)); //draw the watermark on it
image.Save(fbd.SelectedPath.ToString() + "\\watermarked\\" + returnOnlyImageName(file)); //save it in the folder with the same file name, see method below.
}
//Portrait
/* if(imageWidthBild > 350 && imageHeightBild > 520) {
}*/
}
}
else
{
System.Windows.Forms.MessageBox.Show(res);
}
}
}
catch (Exception ex)
{
System.Windows.Forms.MessageBox.Show(ex.Message);
}
}
"methods below"
private static string[] GetFiles(string sourceFolder, string filters)
{
return filters.Split('|').SelectMany(filter => System.IO.Directory.GetFiles(sourceFolder, filter)).ToArray();
}
private static string checkImageSize(string[] files)
{
string message = "The following pictures are too small:\n";
foreach (var file in files)
{
Bitmap img = new Bitmap(file);
var imageHeight = img.Height;
var imageWidth = img.Width;
if ((imageWidth < 640 && imageHeight < 425) || (imageWidth < 350 && imageHeight < 520))
{
message += returnOnlyImageName(file) + "\n";
}
}
if (message == "The following pictures are too small:\n")
{
return "";
}
else
{
message += "\nPlease change those pictures!";
return message;
}
}
private static string returnOnlyImageName(string file)
{
return file.Substring(file.LastIndexOf("\\")+1);
}
public static Bitmap ResizeImage(System.Drawing.Image image, int width, int height)
{
var destRect = new System.Drawing.Rectangle(0, 0, width, height);
var destImage = new Bitmap(width, height);
destImage.SetResolution(image.HorizontalResolution, image.VerticalResolution);
using (var graphics = Graphics.FromImage(destImage))
{
graphics.CompositingMode = CompositingMode.SourceCopy;
graphics.CompositingQuality = CompositingQuality.HighQuality;
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphics.SmoothingMode = SmoothingMode.HighQuality;
graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
using (var wrapMode = new ImageAttributes())
{
wrapMode.SetWrapMode(WrapMode.TileFlipXY);
graphics.DrawImage(image, destRect, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, wrapMode);
}
}
return destImage;
}
and is it also anyhow possible to save all the watermarks in the bottom right corner?
thanks in regards

Here you go...
void waterMarkOnBottomRight(Image img, Image watermarkImage, string saveFileName)
{
double imageHeightBrand = Convert.ToDouble(watermarkImage.Height);
double imageWidthBrand = Convert.ToDouble(watermarkImage.Width);
double ratioBrand = imageWidthBrand / imageHeightBrand;
double imageHeightBild = Convert.ToDouble(img.Height); //height of the image to watermark
double imageWidthBild = Convert.ToDouble(img.Width);
var imageWidthTmpBranding = imageWidthBild * 0.2; //the watermark width, but only 20% size of the image to watermark
var imageHeightTmpBranding = imageWidthTmpBranding / ratioBrand; //height of watermark, preserve aspect ratio
int imageWidthBranding = Convert.ToInt32(imageWidthTmpBranding); //convert in into int32 (see method below)
int imageHeightBranding = Convert.ToInt32(imageHeightTmpBranding);
int watermarkX = (int)(imageWidthBild - imageWidthBranding); // Bottom Right
int watermarkY = (int)(imageHeightBild - imageHeightBranding);
using (Graphics g = Graphics.FromImage(img))
g.DrawImage(watermarkImage,
new Rectangle(watermarkX, watermarkY, imageWidthBranding, imageHeightBranding),
new Rectangle(0, 0, (int)imageWidthBrand, (int)imageHeightBrand),
GraphicsUnit.Pixel);
img.Save(saveFileName);
}
This one's working for landscape (width > height).
Well.. in your code, you don't have to create separate instances for images for calculating, for creating graphics, add a new bitmap and paint using graphics and all. You do anything with the image, its in the memory. And its not going to affect the watermark image on your disk.

How to keep proper aspect ratio of my application for a widescreen monitor?

I have a widescreen monitor and I want to keep aspect ratio of my application and even handle "wrong" resolution that might be set.
For example monitor can display perfect circle with resolution 1920x1080.
But circle looks like ellipse when resolution 1400x1050 is set.
Our client is really picky on this and asks to determine and resize app to display perfect circle with any resolution and monitor we can handle.
So is it possible somehow to scale application and keep aspect ratio to display it with proper proportions on real device?

You could override the OnResize event of the Form to preserve its aspect ratio:
private static readonly Size MaxResolution = GetMaxResolution();
private static double AspectRatio = (double)MaxResolution.Width / MaxResolution.Height;
private readonly PointF Dpi;
public YourForm() // constructor
{
Dpi = GetDpi();
AspectRatio *= Dpi.X / Dpi.Y;
}
private PointF GetDpi()
{
PointF dpi = PointF.Empty;
using (Graphics g = CreateGraphics())
{
dpi.X = g.DpiX;
dpi.Y = g.DpiY;
}
return dpi;
}
private static Size GetMaxResolution()
{
var scope = new ManagementScope();
var q = new ObjectQuery("SELECT * FROM CIM_VideoControllerResolution");
using (var searcher = new ManagementObjectSearcher(scope, q))
{
var results = searcher.Get();
int maxHResolution = 0;
int maxVResolution = 0;
foreach (var item in results)
{
if (item.GetPropertyValue("HorizontalResolution") == null)
continue;
int h = int.Parse(item["HorizontalResolution"].ToString());
int v = int.Parse(item["VerticalResolution"].ToString());
if (h > maxHResolution || v > maxVResolution)
{
maxHResolution = h;
maxVResolution = v;
}
}
return new Size(maxHResolution, maxVResolution);
}
}
protected override void OnResize(EventArgs e)
{
base.OnResize(e);
int minWidth = Math.Min(Width, (int)(Height * AspectRatio));
if (WindowState == FormWindowState.Normal)
Size = new Size(minWidth, (int)(minWidth / AspectRatio));
}
EDIT
Assuming that the maximum screen resolution reflects the "square" requirement, you could get all the screen resolutions as described here and here. You only need to find the "maximum" of them.
Notice, that Windows usually doesn't have real DPI values, I use DPI only to compare the horizontal DPI with the vertical one.

Get height of your window and scale the width as a fraction of the height, or the other way around, as desired.
void aspectRation(var width, var height){
//Divide by 100 to get 1% of height, then multiply by (a number) to maintain ratio
var newWidth = (height/100) * 80;
//set the window size here
}
Setting the window size will depend on your application.