先说概念:
HSL是一种描述颜色的方式,其他颜色描述方式还有大家熟悉的RGB值。HSL三个字母分别表示图像的Hue色相、Saturation饱和度、Lightness明亮度。

需求:
制作一个面板,包含三个滑动条,拖动滑动条可以修改目标图片的HSL值。即模仿PS中类似的功能,如下图:


方案一:遍历所有像素点,修改每个点的HSL值。

参考:https://stackoverflow.com/questions/10332363/getting-hue-from-every-pixel-in-an-image

 for (int j = ; j < bitmap.Height; j++)
{
for (int i = ; i < bitmap.Width; i++)
{
System.Drawing.Color color = bitmap.GetPixel(i, j);
// todo something
}
}

经测试遍历像素点修改效率极低,卡得难以忍受。还是找第三方库吧。


方案二:使用三方库MagickImage.Net

众所周知MagickImage是一个及其强大又多功能的图像处理库,而且有多个平台下对应的版本(如Java、PHP)。

步骤:

1、 在Visual Studio的NuGet中搜索、下载、安装MagickImage。选最上面最高下载量这个。

2、随便打开一个类,输入ImageMagick.MagickImage并导包后,按下F12查看该类有哪些方法能实现我们的需求。在该类中按Ctrl + F搜索hue,即可看到该类的确提供了修改图像HSL的方法!

(文件很长,中间省略。。。)

3、观察上图这个Modelate()方法的传参,是结构体ImageMagick.Percentage,该结构体的描述跟图片像素无关。看下图,该Percentage构造函数中传参的是一个数字,可知该Modelate()方法修改的HSL值是原图的HSL值的一个百分比!

4、再观察被操作的图像ImageMagick.MagickImage这个类,该类提供了toBitmap()和toBitmapSource()方法,前者Bitmap是通用的图像类型,后者BitmapSource是WPF使用的图像类型,说明该类连图像类型转换的功能都准备好了,前置条件一切OK!

5、了解所需函数的使用方法后,开始做Demo。界面如下,一个Image控件显示图片,三个Slider滑动条分别调节Hue色相、Saturation饱和度、Lightness明亮度。

<DockPanel Width="400" Height="150" VerticalAlignment="Top" Margin="0,20,0,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions> <Label Content="色相" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" />
<Slider x:Name="slider0" Value="{Binding SliderValue0}" Minimum="0" Maximum="200" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1"/> <Label Content="饱和度" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" />
<Slider x:Name="slider1" Value="{Binding SliderValue1}" Minimum="0" Maximum="200" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1"/> <Label Content="明度" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" />
<Slider x:Name="slider2" Value="{Binding SliderValue2}" Minimum="0" Maximum="200" VerticalAlignment="Center" Grid.Row="2" Grid.Column="1"/> </Grid>
</DockPanel>

界面如下图:

注意,因为Modelate()方法的传参要求是百分比,所以Slider滑动条的两头的值为0,200(表示0%和200%),默认位置在中间100(表示100%,即HSL未修改的状态)。

Controller层给这三个Slider滑动条添加滑动事件,下面只以修改Hue色相为例:

private ImageMagick.MagickImage originalMagickImage; // 图层图像修改前的状态

// 先执行该方法!
private void Init()
{
// 滑动条的修改是在原图的基础上修改!
Bitmap bitmap = ImageSourceToBitmap(img.Source); // img是前台Image控件
originalMagickImage = new ImageMagick.MagickImage(bitmap);
} /// <summary>
/// 调节色相。在原图的基础上增加/减少百分比
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Hue_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
// 只调整图像的Hue色相值
ImageMagick.Percentage brightness = new ImageMagick.Percentage(100); // 100%表示不改变该属性
ImageMagick.Percentage saturation = new ImageMagick.Percentage(100);
ImageMagick.Percentage hue = new ImageMagick.Percentage(e.NewValue); // 滑动条范围值0%~200%
ImageMagick.MagickImage newImage = new ImageMagick.MagickImage(originalMagickImage); // 相当于深复制
newImage.Modulate(brightness, saturation, hue); // 重新给Image控件赋值新图像
BitmapSource bitmapImage = newImage.ToBitmapSource();
img.Source = imageSource;
} // 工具方法:ImageSource --> Bitmap
public System.Drawing.Bitmap ImageSourceToBitmap(ImageSource imageSource)
{
BitmapSource m = (BitmapSource)imageSource; System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(m.PixelWidth, m.PixelHeight, System.Drawing.Imaging.PixelFormat.Format32bppPArgb); System.Drawing.Imaging.BitmapData data = bmp.LockBits(
new System.Drawing.Rectangle(System.Drawing.Point.Empty, bmp.Size), System.Drawing.Imaging.ImageLockMode.WriteOnly, System.Drawing.Imaging.PixelFormat.Format32bppPArgb); m.CopyPixels(Int32Rect.Empty, data.Scan0, data.Height * data.Stride, data.Stride); bmp.UnlockBits(data); return bmp;
}

经测试,该方法效率很高!拖拽滑动条立马能看到HSL修改后的效果!显著比两个For循环遍历所有像素点高效很多!


2017.7.17更新:

项目有了新的需求,还要做调节图像的对比度(Contrast),就顺便把之前落下的GIF补上。同时因为做对比度时没有再使用这个ImageMagick插件,所以打算新开一篇博文 http://www.cnblogs.com/guxin/p/csharp-wpf-adjust-image-contrast.html

调节色相(Hue)的动图:


调节饱和度(Saturation)的动图:


调节明度(Lightness)的动图:


另外,关于调节图像的对比度(Contrast),可参考在下的另一篇博文:

【C#/WPF】调节图像的HSL(色相Hue、饱和度Saturation、明亮度Lightness)的更多相关文章

  1. 【C#/WPF】调节图像的HSL(色相、饱和度、明亮度)

    原文:[C#/WPF]调节图像的HSL(色相.饱和度.明亮度) 先说概念: HSL是一种描述颜色的方式(其他颜色描述方式还有大家熟悉的RGB值).HSL三个字母分别表示图像的Hue色相.Saturat ...

  2. 【C#/WPF】调节图像的对比度(Contrast)

    关于对比度: 调节对比度直观感受是,高对比度的图像明暗关系更明显,色彩更鲜艳:低对比度的图像表面像是蒙上一层灰,色彩不鲜艳. 需求: 制作一个面板,一个滑动条,拖动滑动条可以修改目标图片的对比度. 资 ...

  3. 图像处理术语解释:灰度、色相、饱和度、亮度、明度、阿尔法通道、HSL、HSV、RGBA、ARGB和PRGBA以及Premultiplied Alpha(Alpha预乘)等基础概念详解

    ☞ ░ 前往老猿Python博文目录 ░ 一.引言 由于老猿以前没接触过图像处理,在阅读moviepy代码时,对类的有些处理方法代码看不懂是什么含义,为此花了4天时间查阅了大量资料,并加以自己的理解和 ...

  4. 借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制

    原文:借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制 本文所示例子是借助第三方设计软件,制作复杂的矢量图形,转成与XAML酷似的SVG,再转换成xaml而实现的. 这 ...

  5. UnityShader:HSV(色相,饱和度,亮度)转换

    http://blog.csdn.net/costfine/article/details/46930473 发现其实美术调整颜色的时候大部分都是调整的HSV,因为可以方便的分别调整色相(hue).饱 ...

  6. WPF图形图像相关类

    BitmapMetadata类: 继承自抽象类ImageMetadata,包含图像的原数据信息,如相机型号.图像修改程序名称.拍照日期.拍照地点等.ImageSoure类包含ImageMetadata ...

  7. 【C#/WPF】图像数据格式转换时,透明度丢失的问题

    问题:工作中涉及到图像的数据类型转换,经常转着转着发现,到了哪一步图像的透明度丢失了! 例如,Bitmap转BitmapImage的经典代码如下: public static BitmapImage ...

  8. WPF将RGB转为HSL的工具类

    class HSLColor     {         private int _alpha = 255;         public int _hue = 0;         public d ...

  9. 精通D3.js笔记

    DOM常用属性 innerHTML: 元素标签内部的文本. innerText outerHTML outerText nodeName: 节点名称 parentNode: 父节点 nextSibli ...

随机推荐

  1. CentOS下安装IDE -- QTCreator

    月底,美国的大佬们将会过来给我们几个搞一个培训.老大要求我们提前学习一下Qt. 我现在的首要任务是在自己的CentOS系统上安装一下Qt开发环境. 1. 获取下载地址 Qt的官网是:http://qt ...

  2. Java 性能测试的四项原则

    绝大数的开发人员在日常工作过程中都会或多或少的遇见过性能问题,本文旨在阐述性能测试的理论,从而为性能分析和开发人员做指导.本文对于那些刚刚接触性能调优和正在解决问题的开发人员也能提供一些启发性的思路. ...

  3. (二)Linux Shell编程——运算符、注释

    2.7 Shell运算符 Bash 支持很多运算符,包括算数运算符.关系运算符.布尔运算符.字符串运算符和文件测试运算符.原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 ...

  4. awk打印倒数第2列

    cat 1-iplist.txt | awk '{ print $(NF-2) }'|wc 实际示例: 打印nginx日志中 变量request_time超过3秒的日志信息 [root@datalin ...

  5. C中字符串分割函数strtok的一个坑

    strtok的典型用法是: p = strtok(s4, split); while(p != NULL){ printf("%s\n", p); p = strtok(NULL, ...

  6. oracle客户端服务端字符集-解决乱码

    查询server段字符集 select userenv('language') from dual 查询client段字符集 select * from v$nls_parameters NLS_LA ...

  7. 学会快速装系统 图解硬盘分区软件Norton Ghost使用

    http://edu.itbulo.com/200909/126313_5.htm即使你拥有最先进的电脑,采用传统的方法,Windows的安装速度仍然是令人头痛的!有没有什么重装系统的简便方法呢?当然 ...

  8. iOS拦截导航栏返回按钮事件的正确方式

    当我们使用了系统的导航栏时,默认点击返回按钮是 pop 回上一个界面.但是在有时候,我们需要在点击导航栏的返回按钮时不一定要 pop 回上一界面,比如一个视频播放界面,进入横屏后,默认点击返回按钮仍然 ...

  9. SQL SERVER 2005允许自定义聚合函数-表中字符串分组连接

    不多说了,说明后面是完整的代码,用来将字符串型的字段的各行的值拼成一个大字符串,也就是通常所说的Concat 例如有如下表dict  ID  NAME  CATEGORY  1 RED  COLOR  ...

  10. Uri编码,包括javascript前端与C#服务器端

    URI编码的方法汇总 javascript中的编码有三种方法:escape.encodeURI.encodeURIComponent C#中编码的主要方法:HttpUtility.UrlEncode. ...