使用wsrv.nl指定图片输出参数,包括大小、着色、旋转等--开源神器

in 实用资源 with 0 comment

在之前的文章将网站图片自动转为webp的开源神器:WebP Server Go 中,我说过一直有个需求,能像对象存储的用法那样来使用图片对象,比如我上传的图片比较大,但我可以根据我的页面需求,指定某个地方使用的图片尺寸,这样可以灵活的调整节省流量,也能让访问更加高效,提升体验。

wsrv.nl

对象存储一般都是在访问路径后面加一个参数,指定长和宽,就可以直接访问了,非常方便。不过今天我又发现了一个神器,这个神器叫 wsrv.nl ,大家可以自己访问这个网站,直接使用他的服务。

他的原理,就是你给他一个图片的地址,然后他在服务器上使用libvips来将图片进行调整,然后使用Cloudflare 来对图片进行缓存,这样全球的访问者就能就近访问到这个图片了。

比如我这里有一张图片,很长的长图,地址是 https://raw.githubusercontent.com/duzyn/material-axure-library/master/v9_demo.png ,然后如果我想指定访问时他的宽度和高宽分别为800和1200,那么我们只需要访问:

https://wsrv.nl/?url=raw.githubusercontent.com/duzyn/material-axure-library/master/v9_demo.png&w=800&h=1200

就是 https://wsrv.nl/?url=xxxxx.jpg&w=xx&h-xx
不得不说,全免费的使用起来效果还是非常不错的。真心感谢那些为互联网免费提供资源的大佬们。

自己部署服务自己用

有的人担心这个服务不稳定,哪天网站不能访问了怎么办?放心,作者已经将他的代码开源出来了。
地址:https://github.com/weserv/images

docker安装:

docker run -d -p 8080:80 --shm-size=1gb --name=weserv ghcr.io/weserv/images:5.x

然后把你的域名,做一下反代,就可以用域名来访问了。如果不用反代,可以使用http://127.0.0.1:8080来只让本机访问。

这个使用方法,与上面一样,就需要把前面的wsrv.ml,换成你自己的域名或IP地址端口,就行了。

比如我下面这张:

接口说明

参数参数说明样例备注
&w=宽度&w=800
&h=高度&=1200
&dpr=设备像素比&=1200须指定宽度或高度,使用1到8之间的值
&fit=inside尽可能大&fit=inside保留纵横比,将图像大小调整为尽可能大,同时确保其尺寸小于或等于指定的尺寸。
&fit=outside尽可能小&fit=outside保留纵横比,将图像大小调整为尽可能小,同时确保其尺寸大于或等于指定的尺寸。
&fit=cover覆盖&fit=cover裁剪图像以覆盖两个提供的尺寸。
&fit=fill填充&fit=fill忽略输入的纵横比并拉伸到两个提供的尺寸。
&fit=contain包含&fit=contain&cbg=black嵌入两个提供的尺寸内。剩余空间可以使用 填充背景颜色&cbg=
&we无放大&we如果宽度或高度已经小于指定尺寸,请勿放大。
&output=输出格式&output=webp支持jpg/png/gif/tiff/webp
&q=输出质量&q=支持jpg/png/gif/tiff/webp

更多高级用法,如控制位置、裁剪、遮罩、方向、模糊、锐化、着色等功能 , 请参阅官方的说明文档:
https://wsrv.nl/docs/

Responses