巧用CDN圖片處理實現(xiàn)圖片水印和圖片彈窗兼容

看見就非常 2020-02-25

展開全文

使用一種特別的姿勢來解鎖CDN云儲存也就是七牛，又拍，OSS的更多關于圖片的玩法，使得文章圖片實現(xiàn)縮略圖+水印+圖片彈窗功能兼容并蓄。

前言

不知道在什么時候，就有人向我提出一個問題：既然縮略圖可以直接使用七牛或者又拍的，那么文章的圖片水印是不是也可以直接使用CDN的水印功能？我看到這個問題之后就開始試驗，但是很久就放棄了，主要是因為文章的圖片樣式會影響Git的圖片彈窗，因為Git的突破彈窗使用的是fancybox的方案，我不知道別人的是不是也是不兼容，后來我發(fā)現(xiàn)百度好像也有類似問題，所以我也就放棄了，但是前不久又碰到圖片樣式，但是卻被一種很詭異的方式解決了，今天來說下。

解決辦法

首先，這篇文章的首圖就是開啟了水印+縮略圖的【本網(wǎng)站水印被我暫時去掉了，所以看不到，右下角的水印是截圖工具自帶的】，雖然目前我的水印被窩去掉了，但是不會影響看問題，我的圖片鏈接后綴是加的!water.jpg,如果只看顯示的圖片的話，他的寬度應該只有750px，但是地阿里之后圖片尺寸確實1920px的，也就是說之前打開網(wǎng)頁加載的是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');