实战分享 | .Net Core自由图片尺寸请求的实现与用途- 大数跨境

首页

实战分享 | .Net Core自由图片尺寸请求的实现与用途

网信科技

2019-08-06

导读：实战经验分享多才的网信程序员又上线了！我们平常浏览网页或打开APP应用时，在有图片列表的地方，如果发现图片

实战经验分享

多才的网信程序员又上线了！

我们平常浏览网页或打开APP应用时，在有图片列表的地方，如果发现图片加载缓慢（图片一点点加载出来），那就意味着几方面的问题需要你的注意：

1. 你的网速有点低，或者是这家图片资源提供服务器的带宽或计算力不足。

2. 如果是手机蜂窝网打开的话，那就要小心你的流量消耗了。

3. 加载太慢，等的心情变差了。

造成上述问题的罪魁祸首就是因为这些要显示的图片太大了。而解决这些问题的最直接的方法就是缩略图的应用。

关于缩略图，大家都不会陌生，这是个好东西，因为它是原大图的缩小图，图片尺寸也小，所以加载就快了，这最终的效果就是能节省我们的资源与提升我们上网冲浪的心情。

缩略图一眼能看到原大图的全部概略效果，因为是缩小图，所以要想看清细节，就需要再点击这个缩略图来进行放大，放大呢，也分几个级别，可以根据目标浏览窗口尺寸进行具体尺寸的请求，这样一张原图2K、4K、8K分辨率的图也可以实时根据用户需要来进行响应。想要实现这样的效果，我们就不能在用户上传图片时就制作缩略图了，需要在请求时制作相应尺寸的缩略图。

1．第一种，提供独立的缩略图接口，但这样一来就需要重新调整原图url的结构，比如：http://localhost:8080/images/bg027.jpg这样的图片URL，需要改成这样或者其它自定的路由形式：

http://localhost:8080/thumbnail?path=/images/bg027.jpg&width=300&height=200（原结构完成改变了）

2．第二种，就是不改变原路径，仅仅是添加了查询参数，比如：

http://localhost:8080/images/bg027.jpg&width=300&height=200(最大程度保持原样)

3．第三种，在request header中设置请求尺寸，这样原URL不用改变，但这样不利于img src标签的使用。

本文重点解决第二种，具前端工程师说，这样改动最方便。

现在我来讲解下如何在asp.net core跨平台技术开发的项目中添加上述自由尺寸缩略图的功能。由于asp.net core所有的资源请求全部通过管道中间件来进行处理，而这其中就有封装好的静态资源中间件，这就需要我们拦截这个图片请求，自已处理好，自己返回给客户端（浏览器或APP）。

具体实现核心代码如下：

最终效果：

最后的问题：缓存！以上针对少量用户进行大图查看时，已完美解决，但如果大量用户重复读取，每次都需要重新制作，会消耗服务器资源。解决思路：直接生成指定规则名称缩略图文件，根据请求参数判断目标文件是否已生成，有则直接读取。

后续改进的代码就不贴出了，有需要直接联系我们。

壮观的图片加载列表，同时出现：

IT综合服务商

智慧旅游解决方案专家

【声明】内容源于网络

网信科技

苏州网信信息科技股份有限公司成立于2007年，公司总部设立在江苏省苏州市，目前拥有近百名员工。公司主要从事智慧城市规划设计与实施，包括智慧城市、数字企业、信息安全、信创服务、大数据、云计算、元宇宙等业务方向。

内容 403

粉丝 0

网信科技苏州网信信息科技股份有限公司成立于2007年，公司总部设立在江苏省苏州市，目前拥有近百名员工。公司主要从事智慧城市规划设计与实施，包括智慧城市、数字企业、信息安全、信创服务、大数据、云计算、元宇宙等业务方向。

总阅读61

粉丝0

内容403