七牛圖片處理樣式的正確使用方式

編輯：狂族晨曦 來源：經驗雜筆 日期：2016-09-15 閱讀： 10,494 次 11 條評論 » 百度已收錄

七牛圖片處理樣式，也就是我們通過創建一個樣式，樣式內定義了要對圖片進行怎樣的操作，然后我們只需要在圖片后面加上樣式分隔符和樣式名稱，即可對圖片進行處理的一種方式。說起來，這種方式就像我們添加在functions.php中定義的加在鉤子上的函數，要用的時候，直接調用函數，函數內的處理也就隨之而動了。

使用方法

七牛圖片處理樣式，之前先森一直稱其為七牛裁剪代碼。因為先森將處理樣式用在的一般是縮略圖上，所以稱之為裁剪；而代碼主要就是先森鬧了笑話了。先森之前對七牛圖片處理樣式的使用一直是將樣式內容直接加在圖片后面，中間加上了個問號,這樣就導致圖片的鏈接看起來非常的長（如下圖）。

加上七牛裁剪代碼鏈接特別顯得長

上面的這種使用方式，簡而言之就是，七牛為我們準備好了一個調用函數，而先森卻非要每次都把函數內容重新寫一遍。還好，先森在@第9頁看到了正確的使用方法。

正確的使用方法應該如下圖，直接用斜杠+樣式名稱。

正確的使用方式

注意事項

1.七牛圖片處理樣式的個數不是固定的，每個存儲空間可以定義100個圖片處理樣式。這一點對我們小站影響比較小，先森目前才使用7個樣式。

2.就像PHP語言要加上<?php ?>來區分php代碼一樣，圖片鏈接那么長，圖片名稱和圖片處理樣式的名稱都是用戶自定義的，萬一兩個名稱重復了怎么辦呢？所以，七牛也需要一個協議好的“定義”來區分一串字符是否為圖片處理樣式。而七牛的這個“定義”，就是樣式分隔符。

樣式分隔符

這個樣式分隔符乍眼一看，好像沒有什么作用，選擇哪一個好像都沒有什么。但是，先森使用之后，認為這個分割符還是很有作用的。

樣式分隔符能夠使用的符號如下：

- _ ! / ~ ` @ $ ^ & * ( ) + = { } [ ] | : ; " ' < > , .

七牛默認使用的是斜杠，但先森覺得，這個斜杠就是最不應該作為樣式分隔符的。

先森使用斜杠為分隔符之后，網站上的圖片名稱就完全一樣了。道理很簡單，在一個鏈接中，最后一個斜杠后面的內容，默認為下載后的文件名。如下圖，dengxiang是先森設置的樣式名，清一色啊。

文章中的圖片全是圖片樣式名稱

所以先森也會找時間，把七牛的圖片樣式分隔符，以及主題中的樣式分隔代碼給更換了。大家可以看看七牛官方的演示圖片，以中橫線為樣式分隔符的效果：

以中橫線為分隔符的效果

所以希望還沒有開始使用七牛圖片處理樣式的朋友，第一步先更改樣式分隔符。

代碼部分

如果使用七牛圖片處理樣式，就相當于修改了圖片的后綴名，所以七牛云儲存也就匹配不到文章中的圖片了。在使用斜杠為分隔符的情況下，先森嘗試了修改七牛云儲存中的本地設置-擴展名設置（因為分隔樣式是斜杠，所以用了反斜杠轉移，不然會出錯），但是并沒有起作用。大家可以試試換了分隔符后的情況。

擴展名修改

所以，只能摒棄七牛云儲存了。

然后我們需要做的是將圖片拉取到七牛存儲空間，然后網站上訪問的也是來著七牛的圖片。

因為從一開始先森使用的就是七牛云儲存，而七牛云儲存設置的第一步就是填寫API，這讓先森陷入了一個誤區——沒有API圖片就不會保存到七牛存儲空間。

后來先森想明白了，只需要直接把圖片上的域名改為七牛的域名，然后七牛會判斷圖片是否存在于存儲空間。如果存在，直接輸出；如果不存在，回源拉取圖片到七牛存儲空間。

那么明白了就簡單了，我們只需要將網站上圖片鏈接中的域名直接換成七牛域名即可，在主題的functions.php中添加：

//WordPress七牛CDN代碼版
function QiNiuCDN(){
    function Rewrite_URI($html){
        /* 前面是需要用到七牛的域名,后面是需要加速的靜態文件類型，使用分隔符 | 隔開即可 */
        $pattern ='/http:\/\/(www\.|)capjsj\.cn\/(wp-|ueditor|avatar)([^"\']*?)\.(jpg|js|css|gif|png|jpeg)/i';
        /* 七牛CDN空間地址,請自行替換成實際空間地址 */
        $replacement = 'http://img.capjsj.cn/$2$3.$4';
    $html = preg_replace($pattern, $replacement,$html);
    return $html;
    }
    if(!is_admin()){
        ob_start("Rewrite_URI");
    }
}
add_action('init', 'QiNiuCDN');

這樣我們就用代碼實現了將靜態資源拉取到七牛存儲空間。接下來需要做的，是給文章中的圖片加上七牛蹄片處理樣式，同樣是在functions.php中添加：

/**
 * 七牛縮略圖和水印 D9Y.NET整理
**/
function QiNiuThumbnailWatermark($content) {
   global $post;
   $pattern ="/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
   /* 下面這行代碼中的dengxiang是七牛樣式中的樣式名稱，而斜杠為七牛中設置的樣式分割符 */
   $replacement = '<img$1src=$2$3.$4/dengxiang$5$6>';
   $content = preg_replace($pattern, $replacement, $content);
   return $content;
}
add_filter('the_content', 'QiNiuThumbnailWatermark');
?>

當然，上面這串代碼只是一下就將網站文章圖片添加上了七牛圖片處理樣式，其他如相關文章、最新文章、文章列表中的縮略圖還沒有添加對應的樣式。對于這些，先森是直接在調用圖片時手動添加樣式，直接加在functions.php中的函數，先森還沒去研究。先森的例子如下：

<img src="<?php echo post_thumbnail_src(); ?>/sidebar" alt="<?php the_title(); ?>" />

總結

總之，使用七牛圖片處理樣式，能使你的圖片鏈接看上去更清爽。但如果使用斜杠為樣式分隔符，又會使你的圖片名稱看起來非常操蛋。

另外，七牛圖片處理，不僅僅是裁剪圖片大小，更為重要的是，可以設置圖片水印。

歷史上的今天:

• 2017:  參加《縫紉機樂隊》點映及主演喬杉映后見面會(2)
• 2015:  成都航空職業技術學院校歌——“成航之歌”(1)
• 2015:  成都航院志愿者圓滿完成殘運會開幕式表演任務(0)