WPF中图片处理与图片加载

发表于 | 分类于
WPF中图片处理与图片加载

图片效果设置

填充模式

WPF（Windows Presentation Foundation）中的Image控件支持多种填充模式来调整图像的显示方式。

系统支持的方式

以下是常用的填充模式：

  1. None（无填充）：不对图像进行任何填充，直接按原样显示。

  2. Uniform（等比例缩放填充）：将图像等比例地缩放到可用空间的最大尺寸，保持图像的原始宽高比。

  3. UniformToFill（等比例缩放并裁剪填充）：将图像等比例地缩放到可用空间的最小尺寸，保持图像的原始宽高比，并将超出可用空间的部分裁剪掉。

  4. Fill（填充整个空间）：将图像拉伸或收缩以填充整个可用空间，不保持原始宽高比。

可以通过以下代码为Image控件设置填充模式：

1
<Image Source="image.jpg" Stretch="None" />

其中，Stretch属性用于设置填充模式，默认值为Uniform。可以根据需求选择合适的填充模式来显示图像。

宽高和渲染宽高

WPF Image的宽高指的是在布局中显示的宽高，可以通过设置Width和Height属性来进行调整。

而渲染宽高指的是图像在实际显示时的实际像素宽高。

在WPF中，可以通过设置Stretch属性来控制图像的渲染宽高与宽高的关系。Stretch属性有以下几种取值：

  • None: 图像以实际渲染宽高显示，与设置的宽高无关。
  • Fill: 图像被拉伸或压缩以填充整个Image控件，忽略设置的宽高比例。
  • Uniform: 图像保持宽高比例进行显示，保证图像完全显示在Image控件内，可能会有留白。
  • UniformToFill: 图像保持宽高比例进行显示，保证Image控件被填充，可能会裁剪图像部分内容。

例如，如果设置了Image的宽度为100像素，高度为200像素，而Stretch属性设置为Uniform，那么图像将以保持宽高比例的方式显示，可能会有一部分被裁剪，但一定能完整显示在100x200像素的区域内。

透明度

1
<Image Source="image.png" Width="100" Height="100" Opacity="0.5"/>

图片剪裁

圆形

1
2
3
4
5
6
7
8
9
10
11
12
13
<Image
    Name="UserHeadImage"
    Width="180"
    Height="180"
    Source="..\Images\RollCall\robot@2x.png"
    Stretch="Fill">
    <Image.Clip>
        <EllipseGeometry
            Center="90,90"
            RadiusX="90"
            RadiusY="90" />
    </Image.Clip>
</Image>

矩形

1
2
3
4
5
6
7
8
9
10
11
12
<Image
    Name="UserHeadImage"
    Width="180"
    Height="180"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Source="..\Images\RollCall\robot@2x.png"
    Stretch="Fill">
    <Image.Clip>
        <RectangleGeometry Rect="0,0,180,90" />
    </Image.Clip>
</Image>

图片旋转

1
2
3
4
5
6
7
8
9
10
<Image
    Name="UserHeadImage"
    Width="180"
    Height="180"
    Source="..\Images\RollCall\robot@2x.png"
    Stretch="Fill">
    <Image.RenderTransform>
        <RotateTransform Angle="180" CenterX="90" CenterY="90" />
    </Image.RenderTransform>
</Image>

高斯模糊

1
2
3
4
5
<Image>
    <Image.Effect>
        <BlurEffect Radius="5" />
    </Image.Effect>
</Image>

投影

1
2
3
4
5
<Image Source="image.png" Width="100" Height="100">
  <Image.Effect>
    <DropShadowEffect BlurRadius="5" ShadowDepth="3"/>
  </Image.Effect>
</Image>

加载图片

加载本地文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
using System.IO;
using System.Windows.Media.Imaging;

namespace Z.Utils.Common
{
    public class ZImageUtils
    {
        public static BitmapImage GetImage(string imagePath)
        {
            BitmapImage bi = new BitmapImage();
            if (File.Exists(imagePath))
            {
                bi.BeginInit();
                bi.CacheOption = BitmapCacheOption.OnLoad;
                using (Stream ms = new MemoryStream(File.ReadAllBytes(imagePath)))
                {
                    bi.StreamSource = ms;
                    bi.EndInit();
                    bi.Freeze();
                }
            }
            return bi;
        }
    }
}

调用

1
UserHeadImage.Source = ZImageUtils.GetImage(userPic);

加载项目下图片

1
UserHeadImage.Source = new BitmapImage(new Uri("pack://application:,,/Images/RemoteControl/guangbiao.png"));

加载网络图片

1
UserHeadImage.Source = new BitmapImage(new Uri("https://www.psvmc.cn/head.jpg"));

Uri加载图片

WPF引入了统一资源标识Uri(Unified Resource Identifier)来标识和访问资源。

其中较为常见的情况是用Uri加载图像。

Uri表达式的一般形式为：协议+授权+路径

协议：

pack://

授权：

有两种。

  • 一种用于访问编译时已经知道的文件，用application:///
  • 一种用于访问编译时不知道，运行时才知道的文件，用siteoforigin:///

一般用逗号代替斜杠，也就是改写作application:,,,和siteoforigin:,,,

路径：

分为绝对路径和相对路径。一般选用相对路径，普适性更强

下面，我们举一个简单的例子：

1
pack://application:,,,/images/my.jpg

当然，WPF默认Uri设置有pack://application:,,,，所以我们也可以直接将其写作：/images/my.jpg

后边写例子程序时，为了让读者更好的了解Uri，我们都采用完整的Uri写法。

下面在讲讲加载图片的两种方式：

  1. 一种用XAML引用资源。
  2. 一种用代码引用资源。

加载本项目的图片

用XAML引用资源：

1
<Image Source="pack://application:,,,/images/my.jpg"/>

也可以这样

1
<Image Source="/images/my.jpg"/>

用代码引用资源：

1
image2.Source=new BitmapImage(new Uri("pack://application:,,,/images/my.jpg"),UriKind.Relative);

也可以简写

1
image2.Source = new BitmapImage(new Uri("/images/my.jpg", UriKind.Relative));

加载资源图片

1
2
imagePath = "pack://application:,,,/Solution;component/Properties/../images/star/my.jpg";
imageBrush.ImageSource = new BitmapImage(new Uri(imagePath, UriKind.RelativeOrAbsolute));

加载外部项目图片

WPF中如果你使用的资源文件不是本程序集的，是另外的程序集，就可以这样做：
引用要用的程序集，pack://application:,,,/程序集名称;component/路径 ，其中pack://application:,,,可以省略
示例：

1
<Image Source="pack://application:,,,/Skin;component/image/you.png" />

或者

1
<Image Source="/Skin;component/image/you.png" />

使用siteoforigin

1
imgContent.Source = new BitmapImage(new Uri("pack://siteoforigin:,,,/images/my.jpg"));