原文:
UWP crop image control
最近做项目，需求做一个剪切图片的东东。如下图
主要是在一个canvas上面。根据crop的大小画出半透明的效果
<Canvas x:Name="imageCanvas" Visibility="Collapsed" > <Path x:Name="nonselectRegion" Fill="#88FFFFFF" > <Path.Data> <GeometryGroup> <RectangleGeometry Rect="{Binding OuterRect}"> </RectangleGeometry> <RectangleGeometry Rect="{Binding SelectedRect}"> </RectangleGeometry> </GeometryGroup> </Path.Data> </Path> <Path x:Name="selectRegion" Fill="Transparent" Stroke="{ThemeResource ApplicationForegroundThemeBrush}" StrokeThickness="1"> <Path.Data> <RectangleGeometry Rect="{Binding SelectedRect}"/> </Path.Data> </Path> <Rectangle x:Name="horizontalLine" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLineCanvasTop}" Height="1" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/> <Rectangle x:Name="verticalLine" Canvas.Left="{Binding VerticalLineCanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="1" Height="{Binding SelectedRect.Height}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/> <Rectangle x:Name="horizontalLine1" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLine1CanvasTop}" Height="1" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/> <Rectangle x:Name="verticalLine1" Canvas.Left="{Binding VerticalLine1CanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="1" Height="{Binding SelectedRect.Height}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/> <Ellipse x:Name="topLeftThumb" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding SelectedRect.Top}"/> <Ellipse x:Name="topRightThumb" Canvas.Left="{Binding SelectedRect.Right}" Canvas.Top="{Binding SelectedRect.Top}"/> <Ellipse x:Name="bottomLeftThumb" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding SelectedRect.Bottom}"/> <Ellipse x:Name="bottomRightThumb" Canvas.Left="{Binding SelectedRect.Right}" Canvas.Top="{Binding SelectedRect.Bottom}"/> </Canvas>
另外一个重要的地方就是根据这个crop selection 得到剪切后的流。
代码如下：
async static private Task<byte[]> GetPixelData(BitmapDecoder decoder, uint startPointX, uint startPointY, uint width, uint height, uint scaledWidth, uint scaledHeight) { BitmapTransform transform = new BitmapTransform(); BitmapBounds bounds = new BitmapBounds(); bounds.X = startPointX; bounds.Y = startPointY; bounds.Height = height; bounds.Width = width; transform.Bounds = bounds; transform.ScaledWidth = scaledWidth; transform.ScaledHeight = scaledHeight; // Get the cropped pixels within the bounds of transform. PixelDataProvider pix = await decoder.GetPixelDataAsync( BitmapPixelFormat.Bgra8, BitmapAlphaMode.Straight, transform, ExifOrientationMode.IgnoreExifOrientation, ColorManagementMode.ColorManageToSRgb); byte[] pixels = pix.DetachPixelData(); return pixels; }
在做这个控件的过程中发现了一个很有意思的东西。就是通过CameraCaptureUI 得到的图片。。看起来是旋转了90 度。。这是为什么呢？？
拍照的时候是这样的
拍完了之后如果直接显示，却是这样的
感觉被反转了。。( ╯□╰ )。。
为什么。。等下一个随笔来说说。
有什么问题指出来，大家一起进步
