【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">
        <Canvas
            x: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">
            <Button
                Width="100"
                Height="30"
                Margin="10,0"
                Background="DarkGreen"
                Click="Browse_Click"
                Content="浏览" />
            <Button
                Width="100"
                Height="30"
                Margin="10,0"
                Background="DarkBlue"
                Click="Save_Click"
                Content="另存" />
        </StackPanel>
        <Border
            Grid.Row="1"
            Background="WhiteSmoke"
            CornerRadius="4">
            <Image
                x:Name="ResultImage"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Stretch="Uniform" />
        </Border>