花瓣“去”水印

祝你开心😄

前言（可以跳过不看）

今天在使用花瓣网搜索素材的时候，在搜索界面看到了一张满意的图片，结果点进去，下载后才发现并不是真正的PNG图片，而是有带有PNG网格背景的图片，所以并不是透明的PNG。这心情就不愉快了。于是我用Stylus给搜索到的图片修改了背景颜色，这样是真正的透明PNG就会显示出我设置的背景颜色，那些假的不透明PNG就不会透出背景色。

还有花瓣官方的素材，在搜索列表显示的缩略图是没有水印的，点进图片详情页后就会显示有水印，这心情又不愉快了。于是想给花瓣素材在搜索界面加不同的颜色和用户上传的进行区分，但是stylus不能实现，于是使用油猴脚本进行区分。

此时应该就已经结束了，但我好奇为什么会员素材点进来之前的缩略图为什么没有水印，通过对比url我发现，缩略图url域名后有“/small/”,后缀为 “_fw240webp”，前端的同学应该都了解常见的一些网站和CDN服务中，都会通过url参数或后缀来动态调整图片尺寸，来优化优化图片加载，这是优化网站SEO常用的技术，可以提高用户体验，使用网站加载更流畅，比如b站的图片链接：

https://i0.hdslb.com/bfs/archive/3f33515e3f8606fe24c37dabfe95ba2ee2fc52b6.jpg@672w_378h_1c_!web-home-common-cover.avif
// 672w_378h_1c_ 限制图片尺寸大小
// web-home-common-cover.avif 限制图片为封面显示，格式限制为avif，修改avif为png或jpg，下载就会得到png或jpg格式
// b站图片链接直接删掉所有参数就会得到原始尺寸图片

所以花瓣图片后缀 “_fw240webp”应该是用来控制图片尺寸和格式的，通过删掉后缀和修改后缀格式webp为png发现和猜测的一致。此时就可以得出结论https://gd-hbimg.huaban.com/small/xxxxxxxx是花瓣官网提供的没有水印的最大尺寸图片，当然不可能是原始尺寸图片，毕竟花瓣这么大一个网站也不可能把素材在前端进行加水印。

此时，就可以使用油猴脚本对详情页的有水印图片链接替换为官方提供的没有水印的最大尺寸图片链接，就实现了带双引号的“去”水印。