一个简单的 C# 图片缩放模块 —— Less.Image
2017-06-14 12:01
316 查看
对于 web 项目来说,对图片进行不同尺寸的缩小是必须的。
如果你编写过支持 IE6 的 web 项目,你会记得 IE6 对图片的缩放效果是很差的,要禁止你的图片被浏览器缩放,就要在服务端先把图片缩放到适合的尺寸。现在 IE6 基本被淘汰了,但是为了页面的加载速度,你还是要在服务器端把图片缩小。特别是现在很多人用移动流量浏览网页,为了节省用户的流量费,也要在服务器端把图片缩小,最好服务器端响应的图片,大小和在浏览器呈现的是一样的。
大约在七八年前,我写了一些服务器端缩放图片的代码。现在修改一下开源出来。
取一张测试用的原图,尺寸为 600×721:
![](http://bibaoke.com/img/PC2m0_kDK0Oma8tUy0sPUA?auth=post)
读取图片:
把图片调整为 300×200:
效果如下:
![](http://bibaoke.com/img/bpWjdFtisEK4Ij8t1aDvRA?auth=post)
Resize 方法的这个重载无论指定什么样尺寸,都不会对图片进行裁剪,而是使用填充的方法,自动计算在宽度上填充还是在高度上填充。上面的例子是在宽度上填充的。如果不想这样,可以使用另一个重载:
效果如下:
![](http://bibaoke.com/img/ZAKkQ1Qu5USjT9FICR8-dQ?auth=post)
这次同样是把图片调整为 300×200,但是使用了裁剪的方法。函数的第三个参数 ResizeMode 是一个 Resize 模式选项,有 ResizeMode.WidthFirst 宽度优先,和 ResizeMode.HeightFirst 高度优先两个选项。test2 选择了宽度优先,意思是不在图片的宽度做任何的裁剪和填充,如果调整后的图片和原图比例不同,只在图片的高度上做调整。test2 就在图片的高度上做了裁剪。如果
test2 选择高度优先,效果是和 test1 一样的,test1 函数是因为不能对图片做裁剪,而自动选择了高度优先。
这种缩放的方法是普遍用在 web 编程的服务端上面的,我看到的产品都会使用裁剪的方法,比如微信、微博。裁剪虽然会使图片“损失”了一部分,但对比起填充来说,可以让界面更好看,因为不会有没有意义的底色。
使用 Crop 方法可以指定使用裁剪:
用现在流行的九宫格方法演示效果:
![](http://bibaoke.com/img/RvKfhYYotUuYUoulxVI8zQ?auth=post)
![](http://bibaoke.com/img/RvKfhYYotUuYUoulxVI8zQ?auth=post)
![](http://bibaoke.com/img/RvKfhYYotUuYUoulxVI8zQ?auth=post)
![](http://bibaoke.com/img/RvKfhYYotUuYUoulxVI8zQ?auth=post)
![](http://bibaoke.com/img/RvKfhYYotUuYUoulxVI8zQ?auth=post)
![](http://bibaoke.com/img/RvKfhYYotUuYUoulxVI8zQ?auth=post)
![](http://bibaoke.com/img/RvKfhYYotUuYUoulxVI8zQ?auth=post)
![](http://bibaoke.com/img/RvKfhYYotUuYUoulxVI8zQ?auth=post)
![](http://bibaoke.com/img/RvKfhYYotUuYUoulxVI8zQ?auth=post)
Less.Image 的裁剪算法是截取图片的中间部分的,因为大部分图片的主体都在中间,比如杨幂这张图片。微博有一种裁剪算法是截取图片的上部的,这是针对现在流行的高度特别大的图片的,比如图片式的长微博,连环画等。
如果对图片的宽高比没有要求,可以使用:
代码的意思是把图片调整成宽度 300 像素,效果如下:
![](http://bibaoke.com/img/FT5DSLrIs0a-bbmDRAj78g?auth=post)
这个方法是不会对图片进行裁剪或填充的,保留了原图的宽高比。当然,也可以只指定高度:
生成了一张高度 200 像素的图片:
![](http://bibaoke.com/img/lHtXGodvp0qXn1Vu4IdfbA?auth=post)
Less.Image 还提供了较多的重载方法,比如定填充的底色,插值算法等。可以应付服务器端图片缩放的大部分情况。我写这些代码的时间比较早了,在这期间经过了很多测试,处理过数十万图片的批量缩放,在 Less.Image 的内部是不会发生内存泄露的。你知道,在 System.Drawing 命名空间下,很多类都是非托管的。
NuGet:
https://www.nuget.org/packages/Less.Image
本文代码:GitHub 码云
项目代码:GitHub 码云
Less.Image 还有两个缺点。一是缩放 gif 动画,处理后会剩下第一帧,失去了动画的效果;二是因为 windows 内置的 png 编码器并不能很好地压缩图片,所以对 png 进行缩放的话,图片占用空间会比较大。所以如果图片没有透明像素的话,最好使用 jpg。
如果大家有更好的想法,请与我联系。
如果你编写过支持 IE6 的 web 项目,你会记得 IE6 对图片的缩放效果是很差的,要禁止你的图片被浏览器缩放,就要在服务端先把图片缩放到适合的尺寸。现在 IE6 基本被淘汰了,但是为了页面的加载速度,你还是要在服务器端把图片缩小。特别是现在很多人用移动流量浏览网页,为了节省用户的流量费,也要在服务器端把图片缩小,最好服务器端响应的图片,大小和在浏览器呈现的是一样的。
大约在七八年前,我写了一些服务器端缩放图片的代码。现在修改一下开源出来。
取一张测试用的原图,尺寸为 600×721:
读取图片:
Image origin = Image.FromFile(file);
把图片调整为 300×200:
Image test1 = origin.Resize(300, 200);
效果如下:
Resize 方法的这个重载无论指定什么样尺寸,都不会对图片进行裁剪,而是使用填充的方法,自动计算在宽度上填充还是在高度上填充。上面的例子是在宽度上填充的。如果不想这样,可以使用另一个重载:
Image test2 = origin.Resize(300, 200, ResizeMode.WidthFirst);
效果如下:
这次同样是把图片调整为 300×200,但是使用了裁剪的方法。函数的第三个参数 ResizeMode 是一个 Resize 模式选项,有 ResizeMode.WidthFirst 宽度优先,和 ResizeMode.HeightFirst 高度优先两个选项。test2 选择了宽度优先,意思是不在图片的宽度做任何的裁剪和填充,如果调整后的图片和原图比例不同,只在图片的高度上做调整。test2 就在图片的高度上做了裁剪。如果
test2 选择高度优先,效果是和 test1 一样的,test1 函数是因为不能对图片做裁剪,而自动选择了高度优先。
这种缩放的方法是普遍用在 web 编程的服务端上面的,我看到的产品都会使用裁剪的方法,比如微信、微博。裁剪虽然会使图片“损失”了一部分,但对比起填充来说,可以让界面更好看,因为不会有没有意义的底色。
使用 Crop 方法可以指定使用裁剪:
Image test3 = origin.Crop(180, 180);
用现在流行的九宫格方法演示效果:
Less.Image 的裁剪算法是截取图片的中间部分的,因为大部分图片的主体都在中间,比如杨幂这张图片。微博有一种裁剪算法是截取图片的上部的,这是针对现在流行的高度特别大的图片的,比如图片式的长微博,连环画等。
如果对图片的宽高比没有要求,可以使用:
Image test4 = origin.ResizeW(300);
代码的意思是把图片调整成宽度 300 像素,效果如下:
这个方法是不会对图片进行裁剪或填充的,保留了原图的宽高比。当然,也可以只指定高度:
Image test5 = origin.ResizeH(200);
生成了一张高度 200 像素的图片:
Less.Image 还提供了较多的重载方法,比如定填充的底色,插值算法等。可以应付服务器端图片缩放的大部分情况。我写这些代码的时间比较早了,在这期间经过了很多测试,处理过数十万图片的批量缩放,在 Less.Image 的内部是不会发生内存泄露的。你知道,在 System.Drawing 命名空间下,很多类都是非托管的。
NuGet:
https://www.nuget.org/packages/Less.Image
本文代码:GitHub 码云
项目代码:GitHub 码云
Less.Image 还有两个缺点。一是缩放 gif 动画,处理后会剩下第一帧,失去了动画的效果;二是因为 windows 内置的 png 编码器并不能很好地压缩图片,所以对 png 进行缩放的话,图片占用空间会比较大。所以如果图片没有透明像素的话,最好使用 jpg。
如果大家有更好的想法,请与我联系。
相关文章推荐
- 一个简单的Image图片传递的WebService
- android 将图片内容解析成字节数组,将字节数组转换为ImageView可调用的Bitmap对象,图片缩放,把字节数组保存为一个文件,把Bitmap转Byte
- 一个VB.NET写的简单图片缩放处理组件源代码,支持添加半透明效果小图标
- android 将图片内容解析成字节数组,将字节数组转换为ImageView可调用的Bitmap对象,图片缩放,把字节数组保存为一个文件,把Bitmap转Byte
- 图片延迟加载并等比缩放,一个简单的JQuery插件
- C# 图片的转换,一个简单的实例,没有特别的修饰,涉及线程
- java BufferedImage简单图片写字一个小例子
- 【C#/WPF】Image图片的Transform变换:平移、缩放、旋转
- android 将图片内容解析成字节数组,将字节数组转换为ImageView可调用的Bitmap对象,图片缩放,把字节数组保存为一个文件,把Bitmap转Byte
- 图片延迟加载并等比缩放,一个简单的JQuery插件。
- 缩放图片的ImageView 可以进行两指缩放,并且可以进行拖拉的ImageView最简单原生的实现
- android 将图片内容解析成字节数组,将字节数组转换为ImageView可调用的Bitmap对象,图片缩放,把字节数组保存为一个文件,把Bitmap转Byt
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- 制作一个简单的图片浏览器 对应图片的张数,与描述,还有图片的缩放
- EasyFRMS.Image C# 实现图片剪切、缩放、旋转、水印操作
- android 将图片内容解析成字节数组,将字节数组转换为ImageView可调用的Bitmap对象,图片缩放,把字节数组保存为一个文件,把Bitmap转Byte
- 一个可以使得上传的图片大小按照指定的宽度,高度自动按比例进行缩放的函数(C#)
- 用C#做的一个简单的图片浏览器
- 自定义一个简单的可以加载网络图片的ImageView
- C# 一个图片上传的简单方法