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

  1. 基于.NET
  2. 图片服务器
  3. 支持缩略图格式
  4. 基于 ImageResizer

作为一个Web Server来部署 ResizingServer ,可以通过更改Web.Config

  <appSettings>
    <add key="UploadRouteUrl" value="api" /><!-- 设置上传时的Route规则 http://host/{UploadRouteUrl} -->
    <add key="ApiKey" value="48DFD0EE-61A2-4CB5-B1D6-33E917A83202" /><!-- 上传时所用的ApiKey -->
    <add key="AllowFolders" value="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);

源代码地址

https://github.com/chsword/ResizingServer

github已上传到cnblogs文件

时间: 2024-10-05 11:09:17

.NET 响应式自动缩略图服务器的相关文章

5分钟理解 SpringBoot 响应式的核心-Reactor

目录 一.前言 二. Mono 与 Flux 构造器 三. 流计算 1. 缓冲 2. 过滤/提取 3. 转换 4. 合并 5. 合流 6. 累积 四.异常处理 五.线程调度 小结 参考阅读 一.前言 关于 响应式 Reactive,前面的两篇文章谈了不少概念,基本都离不开下面两点: 响应式编程是面向流的.异步化的开发方式 响应式是非常通用的概念,无论在前端领域.还是实时流.离线处理场景中都是适用的. 有兴趣的朋友可以看看这两篇文章: Reactive(1) 从响应式编程到"好莱坞" R

关于响应式设计与服务端性能

服务器端层 智能响应策略的最后一个选择是服务器. 服务器端功能检测和决策不是 移动网络的新鲜玩意.类似 WURFL 和Device Atlas的库在市场上有好多年,响应式设计和服务器组件的混合也众所周知.有时被称为是响应式设计和服务器端组件(RESS),有时又叫自适应设计,这 提高了响应式设计的速度和可用性,同时每一个服务器端都保持一个代码库. 很遗憾的是.这些技术这几年并没有什么突破性的发展.只能在博客和 杂志里看到一些开发者对"RESS"."响应式"."

项目新的需求,网页的自适应交付/响应式交付 Responsive/Adaptive Delivery

网页为什么要做自适应交付,皆因现在移动设备大行其道,现在是移动互联网时代,以IOS及Android为首的各种移动终端已经遍地开花. 当人家用380px的iphone打开你的网页时,你总不能显示个1024px的页面给人家,用户体验大打折购,因为响应式设计或者自适应交付就应运而生. 之前已经提到过响应式设计(responsive design),但响应式设计有个重点就是不管3721,全部资源(html,css,js)统统加载下来,页面比较冗肿:而响应式的交付,完美的响应式交付是服务器跟据访问者的设备

如何在响应式基础上提升移动性能///响应式不是万能的!教你提升响应式设计的移动性能(一)

如何在响应式基础上提升移动性能 摘要:如何在响应式基础上提升移动性能,从细节做起,结合网站,做好响应式页面的设计优化工作.,随着互联网的高速发展,合肥网站建设小编今天为大家介绍,为解决移动性能的响应式页面设计并不是万能的,而应该不断的改进,从而更好的为用户服务.随着互联网的高速发展,例如近段时间炒得火热的谷歌申请的无人机技术,以及电商门户网站阿里巴巴的上市等等,这都促进了互联网日新月异的变化. 所以作为网站seo人员不应固步自封,而应该努力的跟上时代的步伐,不仅需要学习相关的seo知识,而且对于

HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案例看了.发现一个不错的文章.写的比较入门,也很仔细.所以拿过来分享给大家.如果还想看图片的响应式案例可以看我找的另外的一篇<分享一个非常有用的HTML5+CSS3响应式图片案例>. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈

响应式设计时如何自动阻止移动浏览器自动调整页面大小

众所周知,设计响应式页面的时候,经常会碰到某些浏览器他会缩小整个页面的大小来防止出现页面被截取的情况, 我们需要通过放大才能看到其中的内容.这是移动浏览器自动调整页面的功能. 这样就完全达不到响应式的要求. 那么问题来了,如何阻止浏览器自动调整页面大小呢. 有时候看别人写好的响应式代码的时候,系不系经常会看到head标签中经常会出现如下代码 <meta name="viewport" content="initial-scale=2.0,width=device-wid

【温故知新】——Bootstrap响应式知识点复习

前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm ======================================== 一.什么是响应式网页 Responsive Web Page,响应式网页/自适应网页,即一个页面既可以在PC浏览器中浏览,也可以在手机/平板中浏览.并且配合不同设备有不同的响应结果 响应式网页的特点: 1.页面上的图片和

响应式网页设计

随着越来越多类型的移动设备的普及,网页设计也随之变化,响应式网页设计应用而生,目前已有有很多比较流行的框架解决此问题,无论切换任何设备,都会自动根据设备的大小进行动态变化,无需为每个量身定做不同类别的网页,大大节省了开发工作量,响应式网页设计已经成为一种趋势. 一.流行的前端(from_end)设计框架很多,大概有以下几种: 1. Bootstrap Boostrap绝对是目前最流行用得最广泛的一款框架.它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面.它

响应式网页设计中的图片处理

响应式网页设计,是一种正在流行的网页开发思想,它是利用灵活可变的栅格系统,令网页的显示模式可以根据访问设备的屏幕尺寸规格而进行自适应.预计2015年的时候,移动端的用户数量将会从目前的8亿,增长到19亿,而这也意味着目前我们为桌面浏览器而设计的网页,将会在他们的手机和平板上呈现出非常糟糕的使用体验. 但是随着实际应用状况的改变,响应式网页设计还是会出现一系列复杂的并发症.本文余下的部分,就是详细阐述如何在响应式网页中安置和处理多媒体元素,诸如图片和视频,最终的目的是帮你做出一个靠谱的网站,能让这