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

看见就非常 2020-02-25

展开全文

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

前言

不知道在什么时候，就有人向我提出一个问题：既然缩略图可以直接使用七牛或者又拍的，那么文章的图片水印是不是也可以直接使用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');