前言
不知道在什么时候，就有人向我提出一个问题：既然缩略图可以直接使用七牛或者又拍的，那么文章的图片水印是不是也可以直接使用 CDN 的水印功能？我看到这个问题之后就开始试验，但是很久就放弃了，主要是因为文章的图片样式会影响 Git 的图片弹窗，因为 Git 的突破弹窗使用的是 fancybox 的方案，我不知道别人的是不是也是不兼容，后来我发现百度好像也有类似问题，所以我也就放弃了，但是前不久又碰到图片样式，但是却被一种很诡异的方式解决了，今天来说下。
解决办法
首先，这篇文章的首图就是开启了水印+缩略图的【本网站水印被我暂时去掉了，所以看不到，右下角的水印是截图工具自带的】，虽然目前我的水印被窝去掉了，但是不会影响看问题，我的图片链接后缀是加的!water.jpg,如果只看显示的图片的话，他的宽度应该只有 750px，但是地阿里之后图片尺寸确实 1920px 的，也就是说之前打开网页加载的是 750px 的图片，是原图的缩略图，如果看图片尺寸的话就更不一样，我想你们肯定明白了，我说的方法是什么了，就是将图片样式名字命名为【water.jpg】当然，你也可以是别的，比如 googlo.png，比如 happy.gif，总之让图片弹窗的插件认为这个本来就是原图。
实测：七牛，又拍，OSS 都支持这种图片样式命名方法
水印代码
其实这篇文章主要是思路，水印代码什么也就无所谓了，这里贴一下，这里是云落使用的水印代码，这里只要是图片都会被添加水印
- function git_cdn_water($content) {
- global $post;
- $pattern =“/<img(.*?)src=(‘|\”)(.*?).(bmp|gif|jpeg|jpg|png)(‘|\”)(.*?)>/i”;
- $replacement = ‘<img$1src=$2$3.$4!water.jpg$5$6>’;//换成自己的图片样式名字
- $content = preg_replace($pattern, $replacement, $content);
- return $content;
- }
- add_filter(‘the_content’, ‘git_cdn_water’);
可选版水印
上面的代码是所有的图片都添加水印，但是有时候我们上传的美美的图片被加上水印好像也不太好看，这里贴出一个可以选择的版本，只是如果图片水印就必须保持图片弹窗，如果不要水印就不要弹窗了。其实就是修改了一下正则匹配而已啦！
- function git_cdn_water($content) {
- global $post;
- $pattern =“/<a(.*?)href=(‘|\”)(.*?).(bmp|gif|jpeg|jpg|png)(‘|\”)(.*?)><img(.*?)src=(‘|\”)(.*?).(bmp|gif|jpeg|jpg|png)(‘|\”)(.*?)>/i”;
- $replacement = ‘<a$1href=$2$3.$4!water.jpg$5$6><img$7src=$8$9.$10!water.jpg$11$12>’;
- $content = preg_replace($pattern, $replacement, $content);
- return $content;
- }
- add_filter(‘the_content’, ‘git_cdn_water’);
后语
经过这个事情，我想起了一句经常听过的话：有时候思路比技术更重要~
桂公网安备 45010502000016号