制作一个简单的WPF图片浏览器

简介: 原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动。先看效果: 这里实现了以下几个功能:1.  对指定文件夹下所有JPG文件进行预览2.  对选定图片进行旋转3.  对选定图片进行灰度处理4.  对选定图片进行裁切处理5.  无限制的恢复功能6. 类似加入购物车的功能以下来看看其实现过程。
原文: 制作一个简单的WPF图片浏览器

注:本例选自MSDN样例,并略有改动。
先看效果:
WPF图片浏览器 
这里实现了以下几个功能:
1.  对指定文件夹下所有JPG文件进行预览
2.  对选定图片进行旋转
3.  对选定图片进行灰度处理
4.  对选定图片进行裁切处理
5.  无限制的恢复功能
6. 类似加入购物车的功能

以下来看看其实现过程。

1. 建立一个ImageFile类,用来读取图像文件:
// ImageFile.cs
using System;
using System.Collections.Generic;
using System.Windows.Media.Imaging;
using System.Text;

namespace PhotoDemo
{
    public class ImageFile
    {
        private String _path;
        public String Path { get { return _path; } }

        private Uri _uri;
        public Uri Uri { get { return _uri; } }

        private BitmapFrame _image;
        public BitmapFrame Image { get { return _image; } }

        public ImageFile(string path)
        {
            _path = path;
            _uri = new Uri(_path);
            _image = BitmapFrame.Create(_uri);
        }

        public override string ToString()
        {
            return Path;
        }
    }
}
这里有三个只读属性:Path, Uri和BitmapFrame,分别表示图像图路,通用资源标志符(可以是本地,如c:/myimage/aa.jpg或互联网资源,如: http://www.brawdraw.com/userimages/aa.jpg 等)及图像。BitmapFrame是使用编码、解码器返回或获取图像数据的类,类似于GDI+中的Bitmap类。

2. 建立一个图像列表的类,用于取得指定目录下的所有jpg图像文件:
// PhotoList.cs
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Text;

namespace PhotoDemo
{
    public class PhotoList : ObservableCollection<ImageFile>
    {
        DirectoryInfo _directory;
        public DirectoryInfo Directory
        {
            set
            {
                _directory = value;
                Update();
            }
            get { return _directory; }
        }

        public string Path
        {
            set
            {
                _directory = new DirectoryInfo(value);
                Update();
            }
            get { return _directory.FullName; }
        }

        public PhotoList() { }

        public PhotoList(DirectoryInfo directory)
        {
            _directory = directory;
            Update();
        }

        public PhotoList(string path) : this(new DirectoryInfo(path)) { }

        private void Update()
        {
            foreach (FileInfo f in _directory.GetFiles("*.jpg"))
            {
                Add(new ImageFile(f.FullName));
            }
        }
    }
}
这里有两个公共属性:Directory和Path,用来获取或设置图像目录信息和路径,还有一个Update()私有方法,当文件路径变化时,更新最新的图像文件列表数据。

由于需要对图片做后期处理(如冲/打印,制作成卡片或加工成为T恤衫等),要加入一个类似购物车之类的计算功能(实际的计算功能等未作实现),因此还需要:
3. 建立后期处理的类。由于后期加工均涉及“印”,所以就建立一个名为“印类型”(PrintType)的类:
// PrintType.cs
using System;
using System.Collections.Generic;
using System.Text;

namespace PhotoDemo
{
    public class PrintType
    {
        private string _description;
        public string Description { get { return _description; } }

        private double _cost;
        public double Cost { get { return _cost; } }

        public PrintType(string description, double cost)
        {
            _description = description;
            _cost = cost;
        }

        public override string ToString()
        {
            return _description;
        }
    }
}
这里有两个只读属性:描述Description和费用Cost,还对ToString()方法进行了重载。

4. PrintTypeList类,是PrintType列表的集合。
// PrintTypeList .cs
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;

namespace PhotoDemo
{
    public class PrintTypeList : ObservableCollection<PrintType>
    {
        public PrintTypeList()
        {
            Add(new PrintType("4x6 Print", 0.15));
            Add(new PrintType("Greeting Card", 1.49));
            Add(new PrintType("T-Shirt", 14.99));
        }
    }
}

5. 建立一个PrintBase的类:
// PrintBase.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Windows.Media.Imaging;
using System.Text;

namespace PhotoDemo
{
    public class PrintBase : INotifyPropertyChanged
    {
        #region public property
        private BitmapSource _photo;
        public BitmapSource Photo
        {
            set { _photo = value; OnPropertyChanged("Photo"); }
            get { return _photo; }
        }

        private PrintType _PrintType;
        public PrintType PrintType
        {
            set { _PrintType = value; OnPropertyChanged("PrintType"); }
            get { return _PrintType; }
        }

        private int _quantity;
        public int Quantity
        {
            set { _quantity = value; OnPropertyChanged("Quantity"); }
            get { return _quantity; }
        }
        #endregion public property

        public PrintBase(BitmapSource photo, PrintType printtype, int quantity)
        {
            Photo = photo;
            PrintType = printtype;
            Quantity = quantity;
        }

        public PrintBase(BitmapSource photo, string description, double cost)
        {
            Photo = photo;
            PrintType = new PrintType(description, cost);
            Quantity = 0;
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(String info)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(info));
        }

        public override string ToString()
        {
            return PrintType.ToString();
        }
    }
}
这里有三个可读写属性:Photo, PrintType和Quantity(表示图片的数量),还设置了一个PropertyChanged委托,用于当属性变更时做相应的事件处理。

6. 继承自PrintBase的三个类:Print, GreetingCard, TShirt, 分别用来打印,制成贺卡及制作T恤衫。
// Print.cs
using System;
using System.Collections.Generic;
using System.Windows.Media.Imaging;
using System.Text;

namespace PhotoDemo
{
    public class Print : PrintBase
    {
        public Print(BitmapSource photo) : base(photo, "4x6 Print", 0.15) { }
    }
}

// TShirt.cs
using System;
using System.Collections.Generic;
using System.Windows.Media.Imaging;
using System.Text;

namespace PhotoDemo
{
    public class TShirt : PrintBase
    {
        public TShirt(BitmapSource photo) : base(photo, "T-Shirt", 14.99) { }
    }
}

// GreetingCard.cs
using System;
using System.Collections.Generic;
using System.Windows.Media.Imaging;
using System.Text;

namespace PhotoDemo
{
    public class GreetingCard : PrintBase
    {
        public GreetingCard(BitmapSource photo) : base(photo, "Greeting Card", 1.49) { }
    }
}

7. "印"的集合:PrintList
// PrintList.cs
using System;
using System.Collections.ObjectModel;

namespace PhotoDemo
{
    public class PrintList : ObservableCollection<PrintBase> { }
}

8. 还有就是用于裁切操作的类,由于内容较多,改在下一篇“利用Adorner制作用于图像裁切的选择框”中继续。

9.  窗口主程序的编写,其中包括XAML代码与C#代码。由于内容较多,放在另一篇中详解。
10.  程序的启动、配置等(在WPF中,一般都是app.xml, app.xml.cs中进行的)。

目录
相关文章
|
7月前
|
计算机视觉 C++
基于Qt的简易图片浏览器设计与实现
基于Qt的简易图片浏览器设计与实现
327 1
|
JavaScript 对象存储
在阿里云OpenAPI 为什么oss 图片链接, 在浏览器访问直接下载了,不是预览呢?
在阿里云OpenAPI 为什么oss 图片链接, 在浏览器访问直接下载了,不是预览呢?
1501 1
|
移动开发 开发框架 小程序
|
4月前
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
297 0
C#WPF 图片在显示时没有问题,但在运行时图片显示不出来的解决
选中项目,点击右上角的显示全部文件按钮,会将默认隐藏的文件显示出来,选中所需图片,右键,添加到项目,然后选择图片查看属性,生成操作选择resource。完毕。本人目前的解决方案。
502 41
C#WPF 图片在显示时没有问题,但在运行时图片显示不出来的解决
|
6月前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
141 1
使用 JS 实现在浏览器控制台打印图片 console.image()
|
5月前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
162 0
|
6月前
|
缓存 算法 API
视觉智能开放平台产品使用合集之如何在Web浏览器中查看处理后的图片
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
166 0
|
7月前
|
域名解析 应用服务中间件 对象存储
解决阿里云oss图片浏览器访问直接下载而不是打开
解决阿里云oss图片浏览器访问直接下载而不是打开
4050 0
|
7月前
|
移动开发 JavaScript
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
274 0