如何去掉裁剪图片的边框_裁剪框

如何去掉裁剪图片的边框

介绍 (Introduction)

So, this time, I was writing a desktop application where the user should be able to select a part of an image and save the cropped image.

因此，这一次，我正在编写一个桌面应用程序，用户可以在其中选择图像的一部分并保存裁剪后的图像。

Normally, I spend a lot of time and energy on searching the net and trying out existing controls before I start rolling my own, but in this case I didn't, because I was 99% certain right from the start that I wouldn't find any that would live up to my expectations.

通常，在开始滚动自己的控件之前，我会花费大量时间和精力搜索网络并尝试使用现有控件，但是在这种情况下，我没有这样做，因为从一开始，我就99％地确定自己不会找到符合我期望的任何东西。

So I started developing the control myself straight off. I wanted sort of a PictureBox that could show the image, with a selection rectangle that could be adjusted and so on.

因此，我立即开始自己开发控件。 我想要一种可以显示图像的PictureBox ，以及可以调整的选择矩形等等。

Not much more to say. The control ended up better than I could ever have expected and extremely easy to use. So here it is. If you need it, just go ahead - otherwise don't...

没有更多的话要说。 该控件最终比我预期的要好，并且非常易于使用。 就是这样 如果您需要它，那就继续-否则不要...

控制功能概述 (Control Feature Overview)

1)基本控制信息 (1) Basic Control Info)

I derived the control from the standard Panel control. That way, it would get all the Panel properties and behaviour that makes it easy to design and layout your form.

我从标准面板控件派生了该控件。 这样，它将获得所有Panel属性和行为，从而使设计和布局表单变得容易。

Why didn't you derive it from a PictureBox, I can hear you ask? Good question! Don't know, really. I wanted the control to be as lightweight and simple as possible, and I thought that a Panel would be a better base for that than a PictureBox.

您为什么不从PictureBox派生它，我听见您在问？ 好问题！ 真的不知道。 我希望控件尽可能轻巧，简单，并且我认为Panel会比PictureBox更好。

2)您需要了解的属性 (2) Properties You Need to Know About)

As you will see later, the control is EXTREMELY simple to use. There are a handful of properties that are good to know about. Most of them have to do with the look of the control.

如您将在后面看到的，该控件非常易于使用。 有一些很好的知识。 它们中的大多数与控件的外观有关。

• Image - The image property is where you assign the image you need to crop.

  Image -图像属性是您分配需要裁剪的图像的位置。

• OverlayColor - The part of the image that is NOT selected is shown with a semitransparent overlay to make it easier to see the selection itself. You can set the color of the overlay here.

  OverlayColor选择的图像部分显示为半透明的叠加层，以使查看选择本身更加容易。 您可以在此处设置叠加层的颜色。

• OverlayAlpha - The overlay is semitransparent, and the OverlayAlpha property determines just HOW transparent it is. The value should be between 0 (invisible) and 255 (completely opaque).

  OverlayAlpha叠加层是半透明的，并且OverlayAlpha属性确定其透明程度。 该值应介于0 (不可见)和255 (完全不透明)之间。

• SelectionInitialMode determines what selection is shown automatically when you load the image. If you don't like the standard modes and select Custom, you should make sure to handle the SetInitialSelection event in your code. If you don't, the FullImage mode will be used.

  SelectionInitialMode确定在加载图像时自动显示的选择。 如果您不喜欢标准模式并选择Custom ，则应确保在代码中处理SetInitialSelection事件。 否则，将使用FullImage模式。

• SelectionResizeMode determines how you can resize the selection. It also determines if the corner handles are shown or not.

  SelectionResizeMode确定如何调整选择的大小。 它还确定是否显示角手柄。

• SelectionBorderColor, SelectionBorderDashStyle, SelectionBorderDashPattern and SelectionBorderWidth all determine how the border around the selected part of the image is drawn. SelectionBorderDashPattern is not visible in the designer, but should be set in code if you set SelectionBorderDashStyle to Custom. Otherwise, you can forget about it.

  SelectionBorderColor ， SelectionBorderDashStyle ， SelectionBorderDashPattern和SelectionBorderWidth都确定如何绘制图像的所选部分周围的边框。 SelectionBorderDashPattern在设计器中不可见，但如果将SelectionBorderDashStyle设置为Custom ，则应在代码中进行设置。 否则，您可以忘记它。

• SelectionResizeHandleBorderColor, SelectionResizeHandleBorderWidth and SelectionResizeHandleColor determines how the resize handles in the corner are drawn (if they should be drawn at all, that is).

  SelectionResizeHandleBorderColor ， SelectionResizeHandleBorderWidth和SelectionResizeHandleColor确定如何绘制拐角处的调整大小手柄(如果要绘制的话)。

• ThumbnailScalingPercentage - The control can generate a thumbnail for your cropped image if you want. This property determines how big it should be, in percent of the full image size.

  ThumbnailScalingPercentage如果需要，该控件可以为裁剪后的图像生成缩略图。 此属性以完整图像大小的百分比确定应该有多大。

New in version 1.2:

1.2版的新功能：

• StartEditingMode - Determines when it should be possible to edit the Image.

  StartEditingMode确定何时应该可以编辑图像。

3)您需要了解的方法 (3) Methods You Need to Know About)

• GetCroppedImage - Returns the image in the control cropped to the selected area.

  GetCroppedImage返回控件中裁剪到选定区域的图像。

• GetCroppedImageThumbnail - Returns a thumbnail of the image in the control cropped to the selected area. Also see the ThumbnailScalingPercentage property.

  GetCroppedImageThumbnail返回控件中裁剪到所选区域的图像的缩略图。 另请参见ThumbnailScalingPercentage属性。

New in version 1.2:

1.2版的新功能：

• StartEdit and EndEdit - Call these methods to start the edit mode or end it.

  StartEdit和EndEdit调用这些方法以启动或结束编辑模式。

• SaveCroppedImage - Saves the cropped image directly to file

  SaveCroppedImage将裁剪的图像直接保存到文件

• SaveCroppedImageThumbnail - Saves the cropped image thumbnail directly to file

  SaveCroppedImageThumbnail将裁剪的图像缩略图直接保存到文件

• ResetSelection - Resets the selection to the initial selection

  ResetSelection将选择重置为初始选择

用法 (Usage)

As mentioned, it is VERY easy and straightforward to use the control. Merely drop it on your form and adjust the size and look to your liking. Then assign an image to the Image property, for instance like this:

如前所述，使用控件非常简单。 只需将其放在表单上，​​然后调整大小并根据自己的喜好进行调整即可。 然后将图像分配给Image属性，例如这样：

cropBox1.Image = Image.FromFile(fileName);

After that, you can edit the selection, and when you're ready to crop the image, you can get the cropped image like this:

之后，您可以编辑选择，当您准备裁剪图像时，可以像下面这样获得裁剪的图像：

Image croppedImage = cropBox1.GetCroppedImage();

After that, it's simple .NET programming to save the image to a Jpeg file:

之后，可以通过简单的.NET编程将图像保存到Jpeg文件中：

croppedImage.Save(fileName, ImageFormat.Jpeg);

小费 (Tip)

The control uses the entire client surface to paint the Image, but if you think that looks stupid, you can simply set the Padding property to get a border around the image.

该控件使用整个客户端表面绘制图像，但是如果您认为它看起来很愚蠢，则可以简单地设置Padding属性以获取图像周围的边框。

我学到的有趣的东西 (Interesting Thing I Learned)

The standard .NET functionality to load an image from file (see code above) doesn't care anything about the EXIF orientation tag. That means that if you've taken the photo using your smartphone, etc., it may be shown completely wrong when you load it into an Image class.

从文件加载图像的标准.NET功能(请参见上面的代码)与EXIF方向标记无关。 这意味着，如果您使用智能手机等拍摄了照片，则在将其加载到Image类中时可能会显示完全错误。

Luckily, it's easily fixed, and I have of course incorporated it in the control:

幸运的是，它很容易修复，我当然已经将其合并到控件中：

if (Array.IndexOf(_image.PropertyIdList, 274) > -1)
{
    var orientation = (int)_image.GetPropertyItem(274).Value[0];
    switch (orientation)
    {
        case 1:
            // No rotation required.
            break;
        case 2:
            _image.RotateFlip(RotateFlipType.RotateNoneFlipX);
            break;
        case 3:
            _image.RotateFlip(RotateFlipType.Rotate180FlipNone);
            break;
        case 4:
            _image.RotateFlip(RotateFlipType.Rotate180FlipX);
            break;
        case 5:
            _image.RotateFlip(RotateFlipType.Rotate90FlipX);
            break;
        case 6:
            _image.RotateFlip(RotateFlipType.Rotate90FlipNone);
            break;
        case 7:
            _image.RotateFlip(RotateFlipType.Rotate270FlipX);
            break;
        case 8:
            _image.RotateFlip(RotateFlipType.Rotate270FlipNone);
            break;
    }

    // This EXIF data is now invalid and should be removed.
    _image.RemovePropertyItem(274);
}

(The above code snippet is for the sake of simplicity "borrowed" directly from the user ReenignE on StackOverflow - The rest of the control is all my doing! Give credit where credit is due...)

(上面的代码段是为了简单起见，直接从用户ReenignE了StackOverflow-其余的控件是我自己做的！在功劳到期的地方给功劳...)

翻译自: https://www.codeproject.com/Articles/5165220/CropBox

如何去掉裁剪图片的边框