WPF之图片处理系列

WPF 中的一些图片处理方法

一，视觉处理（控件展示）

1，显示图片

• Image控件展示

Xaml代码：

<Image source="/Resources/Images/1.png"/>

• 缩放位图渲染算法

Xaml代码：

<Image Source="/Resources/Images/1.jpg" RenderOptions.BitmapScalingMode="Fant"/>

枚举值	描述
Fant	使用超高质量 Fant 位图缩放，虽然速度比所有其他位图缩放模式都慢，但输出质量更高。
HighQuality	使用高质量位图缩放，虽然速度比 LowQuality 模式慢，但输出质量更高。 HighQuality 模式与 Fant 模式相同。
Linear	使用线性位图缩放，虽然速度比 HighQuality 模式快，但输出质量较低。
LowQuality	使用双线性位图缩放，虽然速度比 HighQuality 快，但输出质量较低。 LowQuality 模式与 Linear 模式相同。
NearesNeighbor	使用最近邻域位图缩放，当使用软件光栅器时，该缩放提供优于 LowQuality 模式的性能。 该模式常用于放大位图。
Unspecified	使用默认位图缩放模式，即 Linear。

2，Image遮罩

• OpacityMask

来自微软官方的说明：
获取或设置一个作为 Brush 实现的不透明蒙板，该蒙板可应用到此元素所呈现内容的任何 Alpha 通道蒙板。 这是依赖项属性。

来自个人的经验解释：
OpacityMask也是一张图片，它用来改变被它遮住的内容的显示区域,
OpacityMasK本身：有内容的区域被镂空，没有内容的区域被填充
被它遮住的控件或者画布：镂空的区域就展示，填充的区域变透明

3，图片DPI

• 图片DPI是每英寸显示的点的个数（点/英寸）
• 图片的宽像素=宽dpi*尺寸
• 图片的高像素=高dpi*尺寸
• WPF 中，所有图片在Xaml中都会被强制拉成96dpi。
  

4，控件的Transform

来自微软官方的说明：
Transform 定义如何将点从一个坐标空间映射或转换到另一个坐标空间。 此映射由转换 Matrix描述，该转换是包含三列 Double 值的三行的集合。

枚举值	描述
RotateTransform	按指定角度旋转元素。
ScaleTranform	按指定的 ScaleX 和 ScaleY 量来缩放元素。
SkewTransform	按指定的 AngleX 和 AngleY 量倾斜元素。
TranslateTransform	按指定的 X 和 Y 量移动（平移）元素。

Xaml代码：

<Image Width="450" Source="/Images/3.jpg">
    <Image.RenderTransform>
        <TransformGroup>
            <TranslateTransform X="10" Y="10" />
            <RotateTransform Angle="20" CenterX="200" CenterY="121"/>
            <ScaleTransform ScaleX="1.5" ScaleY="1.5" CenterX="200" CenterY="121"/>
            <SkewTransform AngleX="10" AngleY="10" CenterX="200" CenterY="121"/>
        </TransformGroup>
    </Image.RenderTransform>
</Image>

---

二，输出文件

1，显示图片

①，BitmapImage的保存

与Bitmap.Save()不同，需要对BitmapImage的数据转为Stream，通过文件流保存

C#代码

BitmapEncoder encoder = new PngBitmapEncoder();
encoder.Frame.Add(BitmapFrame.Create(bitmapImage));
using(var straem=new FileStream(path,FileMode.Create)){
    encoder.Save(stream);
}

②，BitmapImage的Width，Height和PixelWidth,PixelHeight

Width和Height：获取位图的宽/高度（以与设备无关的单位（每个单位 1/96 英寸）为单位）。(会根据电脑DPI的更改获取到不同的值)
PixelWidth和PixelHeight：获取位图的宽/高度（以像素为单位）

③，BitmapImage与Bitmap的互相转换

同样是转为流数据，向Bitmap的构造函数传参

//BitmapImage  to  Bitmap
public static Bitmap GetBitmapByBitmapImage(this BitmapImage bitmapImage,bool isPng=false) {
    Bitmap bitmap;
    MemoryStream outStream = new MemoryStream();
    BitmapEncoder enc = new BmpBitmapEncoder();
    if (isPng) {
        enc = new PngBitmapEncoder();
    }
    enc.Frames.Add(BitmapFrame.Create(bitmapImage));
    enc.Save(outStream);
    bitmap = new Bitmap(outStream);
    return bitmap;
}
// Bitmap  to BitmapImage
public static BitmapImage GetBitmapImageBybitmap(this Bitmap bitmap) {
    BitmapImage bitmapImage = new BitmapImage();
    try {
        using (MemoryStream ms = new MemoryStream()) {
            bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
            bitmapImage.BeginInit();
            bitmapImage.StreamSource = ms;
            bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
            bitmapImage.EndInit();
            bitmapImage.Freeze();
        }
    }
    catch (Exception ex) {
        log.ErrorFormat("bitmap to BitmapImage Failed:" + ex.Message);
    }
        return bitmapImage;
}

2，Visual和DrawingContext

①，Visual

Visual：为 WPF 中的呈现提供支持，其中包括命中测试、坐标转换和边界框计算。

层级关系：
System.Windows.Media.Visual
     System.Windows.Media.ContainerVisual
            System.Windows.UIElement

②，DrawingContext

DrawingContext:使用绘图、推送和弹出命令描述可视内容。

绘制方法：

DrawDrawing： 画Drawing对象

DrawEllipse: 画圆

DrawGeometry: 画几何图形

DrawGlyphRun：画文字

DrawImage： 画图

DrawLine：画线

DrawRectangle/DrawRoundedRectangle：画矩形

DrawText:画带格式的文本

DrawVideo：画视频

PushClip:推送剪切区域

③，RenderTargetBitmap

RenderTargetBitmap:将System.Windows.Media.Visual 对象转换为位图。

④，Image遮罩

和控件方式类似，在后台代码中使用Visual来展示

C#代码

RenderTargetBitmap bmp = new RenderTargetBitmap((int)img.Source.Width, (int)img.Source.Height, 96, 96, PixelFormats.Default);
DrawingVisual visual = new DrawingVisual() { OpacityMask = imgBrush };//遮罩Visual
using (DrawingContext dc = visual.RenderOpen()) {
    dc.DrawImage(img.Source, new Rect(0, 0, img.Source.Width, img.Source.Height));
}
bmp.Render(visual);

⑤，图像变化

同样是修改Visual的Transform
这里注意：文件渲染的Transform和前台的Transform不全相同！！！！
因为界面显示的图片大小和实际大小不一样

C#代码

RenderTargetBitmap bmp = new RenderTargetBitmap((int)img.Source.Width, (int)img.Source.Height, 96, 96, PixelFormats.Default);
DrawingVisual visual = new DrawingVisual() { Transform=img.RenderTransform };//修改Transform
using (DrawingContext dc = visual.RenderOpen()) {
    dc.DrawImage(img.Source, new Rect(0, 0, img.Source.Width, img.Source.Height));
}
bmp.Render(visual);

⑥，PathGeometry

来自微软官方的解释：表示一个可能由弧、曲线、椭圆、直线和矩形组成的复杂形状

LineGeometry 直线
ps：这个LineGeometry可以实现线头和线尾的圆滑笔触效果

new LineGeometry(start, end).GetWidenedPathGeometry(new Pen(Brushes.Black, 10) { StartLineCap = PenLineCap.Round, EndLineCap = PenLineCap.Round }); 

EllipseGeometry 圆
RectangleGeometry 矩形

⑦，抠图

通过DrawingContext的PushClip可以将指定的剪辑区域推送到绘图上下文上。
需要利用到上面的Geometry几何图形
配合一些鼠标事件可以手动实现inkcanvas和类似PS的背景橡皮擦

C#代码

RenderTargetBitmap bmp = new RenderTargetBitmap((int)img.Source.Width, (int)img.Source.Height, 96, 96, PixelFormats.Default);
DrawingVisual visual = new DrawingVisual() { OpacityMask = imgBrush };//遮罩Visual
using (DrawingContext dc = visual.RenderOpen()) {
    RectangleGeometry full = new RectangleGeometry(new Rect(0,0,777,523));//全图区域
    var clip= Geometry.Combine(full, new RectangleGeometry(new Rect(200,200,300,300)), GeometryCombineMode.Exclude, null);//减去一个矩形的区域
    dc.PushClip(clip);//推送clip区域结果
    dc.DrawImage(img.Source, new Rect(0, 0, img.Source.Width, img.Source.Height));
}
bmp.Render(visual);

正方形抠图

线条抠图

⑧，裁剪

• BitmapSource中有一个方法叫做CopyPixels，复制像素点集到一个新的BitmapSource里面。可以实现裁剪

stride:位图的跨距（一行的字节数）。
pixels:表示位图图像内容的字节数组。

public static BitmapSource CutImage(BitmapSource bitmapSource, Int32Rect cut) {
    //计算Stride
    var stride = bitmapSource.Format.BitsPerPixel * cut.Width / 8;
    //声明字节数组
    byte[] data = new byte[cut.Height * stride];
    //调用CopyPixels
    bitmapSource.CopyPixels(cut, data, stride, 0);
    return BitmapSource.Create(cut.Width, cut.Height, 0, 0, PixelFormats.Bgra32, null, data, stride);
}