首页 > 代码库 > .NET 响应式自动缩略图服务器
.NET 响应式自动缩略图服务器
做互联网网站,总是会涉及到缩略图问题,之前一直是在上传图片时生成不同尺寸的缩略图,一直感觉又费力又不好管理,之后就写子
ThumbnailServer 用于部署一个图片服务器,在使用图片时才将图片转为对应的缩略图,类似淘宝图片空间
比如,物理上存在图片
/x.jpg 那么访问
/x.jpg_60X60.jpg
/x.jpg_600X600.jpg
就可以得到它的不同尺寸的缩略图
ThumbnailServer
可以支持:
路径-尺寸白名单
图片类型白名单
图片路径白名单
如下代码:
ThumbnailConfig.Start().Include("/Images", setting => setting.AllSize().Store() );
在Application Start中配置即可
GitHub: https://github.com/chsword/ThumbnailServer
另外再推荐一个不错的响应式缩略图服务,功能很强大,按比例缩放、裁剪图片都可以通过Querystring来完成,优点是插件很多,功能强大
地址:http://imageresizing.net
/a.jpg
/a.jpg?w=120
/a.jpg?w=100&h=200
之前写过一篇文章
.NET 响应式自动缩略图服务器
之后对此Image Server又进行了基于ImageResizer的改写
- 基于.NET
- 图片服务器
- 支持缩略图格式
- 基于 ImageResizer
作为一个Web Server来部署 ResizingServer ,可以通过更改Web.Config
<appSettings> <add key="UploadRouteUrl" value="http://www.mamicode.com/api" /><!-- 设置上传时的Route规则 http://host/{UploadRouteUrl} --> <add key="ApiKey" value="http://www.mamicode.com/48DFD0EE-61A2-4CB5-B1D6-33E917A83202" /><!-- 上传时所用的ApiKey --> <add key="AllowFolders" value="http://www.mamicode.com/face,images" /><!-- 文件夹/类别 对不同业务线存储不同使用不同文件夹的情况 --> </appSettings>
物理路径 将类似 upload/face/1508/21/5a020a4161f543f197ddc0965aeeb66d.jpg
目录结构为
- upload
- category(AllowFolders 中所允许的都可以)
- yyMM (年和月)
- dd (天)
- {guid}.jpg
- dd (天)
- yyMM (年和月)
- category(AllowFolders 中所允许的都可以)
上传后返回这样格式的URL /u/face/b96225af353d15504302a087f4f46bb0151d1c{0}x{1}{2}.jpg 称之为FormatUrl
通过 ResizingClient 的转换可以转换为这样
/u/face/b96225af353d15504302a087f4f46bb0151d1c100x100c.jpg
Client Demo
通过NuGet安装客户端
Install-Package ResizingClient
上传图片代码
var result=ResizingUtil.Upload(File.ReadAllBytes("d:\\a.jpg"), "a.jpg", "face").Result;Console.WriteLine(result.FormatUrl);//like /u/face/b96225af353d15504302a087f4f46bb0151d1c{0}x{1}{2}.jpg//Assert.IsTrue(result.IsSuccess);
{0}:宽 {1}:高 {2}:缩略模式
缩略模式:
- c:crop
- m:max
- p:pad
转化FormatUrl
using ResizingClient;// ...var url1 = ResizingUtil.Format(url,100,100,ResizingMode.Pad);var url1 = ResizingUtil.Format(url,100,100);
<iframe id="iframe_0.8053912742443932" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22https://camo.githubusercontent.com/aab5bd728b1d3e28ee8b8c635bf40bf27c241310/687474703a2f2f696d672e736869656c64732e696f2f6e756765742f762f526573697a696e67436c69656e742e7376673f7374796c653d666c61742d737175617265?_=4750746%22%20style=%22border:none;max-width:730px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.8053912742443932‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe> <iframe id="iframe_0.9823202421368145" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22https://camo.githubusercontent.com/6652f0acbde87c19900f4f7fa4c0de959e7290ac/687474703a2f2f696d672e736869656c64732e696f2f6e756765742f64742f526573697a696e67436c69656e742e7376673f7374796c653d666c61742d737175617265?_=4750746%22%20style=%22border:none;max-width:730px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.9823202421368145‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe> <iframe id="iframe_0.4778327589485689" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22https://camo.githubusercontent.com/b75094794d4ef4103a543fa2633cf30f2cd11073/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f636873776f72642f526573697a696e675365727665722e7376673f7374796c653d666c61742d737175617265?_=4750746%22%20style=%22border:none;max-width:730px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.4778327589485689‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
源代码地址
https://github.com/chsword/ResizingServer
github已上传到cnblogs文件
.NET 响应式自动缩略图服务器