UWP crop image control

最新推荐文章于 2020-12-20 20:06:10 发布

weixin_33834137

最新推荐文章于 2020-12-20 20:06:10 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/FaDeKongJian/p/5158862.html

本文介绍了一种在Canvas上实现图片裁剪的方法，通过绘制半透明区域和获取裁剪后的像素数据来完成裁剪功能，并探讨了从CameraCaptureUI获取图片时出现旋转问题的原因。

最近做项目，需求做一个剪切图片的东东。如下图

主要是在一个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;
        }