巧用CDN图片处理实现图片水印和图片弹窗兼容

云大使 • 2018年4月1日下午7:51 • 建站问题 • 阅读 6019

[v_tips]使用一种特别的姿势来解锁 CDN 云储存也就是七牛，又拍，OSS 的更多关于图片的玩法，使得文章图片实现缩略图+水印+图片弹窗功能兼容并蓄。

[v_notice]前言[/v_notice]
不知道在什么时候，就有人向我提出一个问题：既然缩略图可以直接使用七牛或者又拍的，那么文章的图片水印是不是也可以直接使用 CDN 的水印功能？我看到这个问题之后就开始试验，但是很久就放弃了，主要是因为文章的图片样式会影响 Git 的图片弹窗，因为 Git 的突破弹窗使用的是 fancybox 的方案，我不知道别人的是不是也是不兼容，后来我发现百度好像也有类似问题，所以我也就放弃了，但是前不久又碰到图片样式，但是却被一种很诡异的方式解决了，今天来说下。
[v_act]解决办法[/v_act]
首先，这篇文章的首图就是开启了水印+缩略图的【本网站水印被我暂时去掉了，所以看不到，右下角的水印是截图工具自带的】，虽然目前我的水印被窝去掉了，但是不会影响看问题，我的图片链接后缀是加的!water.jpg,如果只看显示的图片的话，他的宽度应该只有 750px，但是地阿里之后图片尺寸确实 1920px 的，也就是说之前打开网页加载的是 750px 的图片，是原图的缩略图，如果看图片尺寸的话就更不一样，我想你们肯定明白了，我说的方法是什么了，就是将图片样式名字命名为【water.jpg】当然，你也可以是别的，比如googlo.png，比如happy.gif，总之让图片弹窗的插件认为这个本来就是原图。