wpf 图片对比 (图片即时缩放)

使用两张图片,一张下面,一张上面
注意:图片太大的话,会变形,需要将图片缩放成 Grid 控件对应的大小

XAML


    <Grid
        x:Name="RootGrid"
        ShowGridLines="False" SizeChanged="FrameworkElement_OnSizeChanged">

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <!--  灰度图  -->
        <Image
            x:Name="GrayImage"
            Grid.Column="0" Grid.ColumnSpan="3"
            Margin="0"
            Source="/Resource/Images/dogincar_grayscale.jpg" Stretch="None" />

        <!--  原始图  -->
        <Image
            x:Name="OriginImage"
            Grid.Column="0"
            Margin="0"
            Source="/Resource/Images/dogincar.jpg" Stretch="None" />

        <!--  分隔把手  -->
        <GridSplitter
            Grid.Column="1"
            Width="4"
            HorizontalAlignment="Center" VerticalAlignment="Stretch"
            Opacity="0" />

        <!--  分隔把手样式  -->
        <Line
            Grid.Column="1"
            HorizontalAlignment="Center"
            Stroke="DimGray" StrokeDashArray="3 5" StrokeThickness="2" X1="0"
            X2="0" Y1="0"
            Y2="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}" />

    </Grid>

代码


    private void FrameworkElement_OnSizeChanged(object sender, SizeChangedEventArgs e)
    {
        this.ResizeImage();
    }

    private void ImageComparisonWindow_OnLoaded(object sender, RoutedEventArgs e)
    {
        this.ResizeImage();
    }

    private void ResizeImage()
    {
        this.ResizeImageCore(this.GrayImage, "/Resource/Images/dogincar_grayscale.jpg");

        this.ResizeImageCore(this.OriginImage, "/Resource/Images/dogincar.jpg");
    }

    private void ResizeImageCore(Image image, string imgPath)
    {
        try
        {
            // 1. 加载资源中的图片
            var imageUri = new Uri($"pack://application:,,,/WpfDemoApp;component{imgPath}",
                UriKind.RelativeOrAbsolute);
            var originalBitmap = new BitmapImage(imageUri);

            // 2. 创建缩放变换
            // double scale = 0.5; // 缩小为原来的一半
            var heightScale = 1d * this.RootGrid.ActualHeight / originalBitmap.Height;
            var widthScale = 1d * this.RootGrid.ActualWidth / originalBitmap.Width;

            var scaleTransform = heightScale > widthScale
                ? new ScaleTransform(heightScale, heightScale)
                : new ScaleTransform(widthScale, widthScale);

            // 3. 创建 TransformedBitmap
            var transformedBitmap = new TransformedBitmap();
            transformedBitmap.BeginInit();
            transformedBitmap.Source = originalBitmap;
            transformedBitmap.Transform = scaleTransform;
            transformedBitmap.EndInit();

            // 4. 设置到 Image 控件中
            image.Source = transformedBitmap;
        }
        catch (Exception exception)
        {
            Console.WriteLine(exception);
            throw;
        }
    }
上一篇
下一篇