【WPF】图片剪裁-ImageCropping

背景

机缘巧合吧，当时在全网寻找图像剪裁工具，但大都不能满足需求，于是决定动手写。当然如果只是为了完成这么一个功能就没有必要记录了，主要是不依赖与第三方图像库，且实现方式简单，自我感觉很有纪念意义。

技术栈

• C#
• .NET6 可无缝升级后续版本
• WPF
• 无第三方库依赖

实现思路

• 使用 Canvas 绘制选区，监听鼠标Down、Move事件，在事件中获取鼠标位置处理选框绘制
  • 获取鼠标左键 Down 时的屏幕坐标，记录为画框起始位置
  • 在鼠标左键并且移动的过程中获取鼠标的屏幕位置，记录为画框结束位置
  • Move 的过程中需要不断清除之前的画框，并重新绘制出新的画框，直到左键松开，绘制出最新的画框
• 根据最新的画框位置，将屏幕位置转换成图像位置，从而获取到真实的图像选择区域
• 通过 CroppedBitmap 取出备选区域的图像内容

核心代码

界面布局

<Grid Margin="5"><Grid.ColumnDefinitions><ColumnDefinition Width="2.5*" /><ColumnDefinition /></Grid.ColumnDefinitions><Border Background="WhiteSmoke" CornerRadius="4"><Canvasx:Name="MainCanvas"MouseDown="Canvas_MouseDown"MouseMove="Canvas_MouseMove"><Image x:Name="MainImage" Stretch="Uniform" /></Canvas></Border><Grid Grid.Column="1" Margin="5,0,0,0"><Grid.RowDefinitions><RowDefinition Height="50" /><RowDefinition /></Grid.RowDefinitions><StackPanel HorizontalAlignment="Center" Orientation="Horizontal"><ButtonWidth="100"Height="30"Margin="10,0"Background="DarkGreen"Click="Browse_Click"Content="浏览" /><ButtonWidth="100"Height="30"Margin="10,0"Background="DarkBlue"Click="Save_Click"Content="另存" /></StackPanel><BorderGrid.Row="1"Background="WhiteSmoke"CornerRadius="4"><Imagex:Name="ResultImage"HorizontalAlignment="Center"VerticalAlignment="Center"Stretch="Uniform"