做网站时怎样图片上传怎么才能让图片不变形有什么插件吗网站源码下载免费

背景

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

技术栈

• 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"