首页 > 代码库 > .NET 响应式自动缩略图服务器

.NET 响应式自动缩略图服务器

2024-10-13 16:36:39   215人阅读

做互联网网站，总是会涉及到缩略图问题，之前一直是在上传图片时生成不同尺寸的缩略图，一直感觉又费力又不好管理，之后就写子

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的改写

  1. 基于.NET
  2. 图片服务器
  3. 支持缩略图格式
  4. 基于 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

上传后返回这样格式的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 响应式自动缩略图服务器


联系
我们