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

編輯：狂族晨曦 來源：經(jīng)驗(yàn)雜筆 日期：2016-09-15 閱讀： 10,499 次 11 條評(píng)論 » 百度已收錄

七牛圖片處理樣式，也就是我們通過創(chuàng)建一個(gè)樣式，樣式內(nèi)定義了要對(duì)圖片進(jìn)行怎樣的操作，然后我們只需要在圖片后面加上樣式分隔符和樣式名稱，即可對(duì)圖片進(jìn)行處理的一種方式。說起來，這種方式就像我們添加在functions.php中定義的加在鉤子上的函數(shù)，要用的時(shí)候，直接調(diào)用函數(shù)，函數(shù)內(nèi)的處理也就隨之而動(dòng)了。

使用方法

七牛圖片處理樣式，之前先森一直稱其為七牛裁剪代碼。因?yàn)橄壬瓕⑻幚順邮接迷诘囊话闶强s略圖上，所以稱之為裁剪；而代碼主要就是先森鬧了笑話了。先森之前對(duì)七牛圖片處理樣式的使用一直是將樣式內(nèi)容直接加在圖片后面，中間加上了個(gè)問號(hào),這樣就導(dǎo)致圖片的鏈接看起來非常的長(zhǎng)（如下圖）。

加上七牛裁剪代碼鏈接特別顯得長(zhǎng)

上面的這種使用方式，簡(jiǎn)而言之就是，七牛為我們準(zhǔn)備好了一個(gè)調(diào)用函數(shù)，而先森卻非要每次都把函數(shù)內(nèi)容重新寫一遍。還好，先森在@第9頁看到了正確的使用方法。

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

正確的使用方式

注意事項(xiàng)

1.七牛圖片處理樣式的個(gè)數(shù)不是固定的，每個(gè)存儲(chǔ)空間可以定義100個(gè)圖片處理樣式。這一點(diǎn)對(duì)我們小站影響比較小，先森目前才使用7個(gè)樣式。

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

樣式分隔符

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

樣式分隔符能夠使用的符號(hào)如下：

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

七牛默認(rèn)使用的是斜杠，但先森覺得，這個(gè)斜杠就是最不應(yīng)該作為樣式分隔符的。

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

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

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

以中橫線為分隔符的效果

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

代碼部分

如果使用七牛圖片處理樣式，就相當(dāng)于修改了圖片的后綴名，所以七牛云儲(chǔ)存也就匹配不到文章中的圖片了。在使用斜杠為分隔符的情況下，先森嘗試了修改七牛云儲(chǔ)存中的本地設(shè)置-擴(kuò)展名設(shè)置（因?yàn)榉指魳邮绞切备埽杂昧朔葱备苻D(zhuǎn)移，不然會(huì)出錯(cuò)），但是并沒有起作用。大家可以試試換了分隔符后的情況。

擴(kuò)展名修改

所以，只能摒棄七牛云儲(chǔ)存了。

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

因?yàn)閺囊婚_始先森使用的就是七牛云儲(chǔ)存，而七牛云儲(chǔ)存設(shè)置的第一步就是填寫API，這讓先森陷入了一個(gè)誤區(qū)——沒有API圖片就不會(huì)保存到七牛存儲(chǔ)空間。

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

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

//WordPress七牛CDN代碼版
function QiNiuCDN(){
    function Rewrite_URI($html){
        /* 前面是需要用到七牛的域名,后面是需要加速的靜態(tài)文件類型，使用分隔符 | 隔開即可 */
        $pattern ='/http:\/\/(www\.|)capjsj\.cn\/(wp-|ueditor|avatar)([^"\']*?)\.(jpg|js|css|gif|png|jpeg)/i';
        /* 七牛CDN空間地址,請(qǐng)自行替換成實(shí)際空間地址 */
        $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');

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

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

當(dāng)然，上面這串代碼只是一下就將網(wǎng)站文章圖片添加上了七牛圖片處理樣式，其他如相關(guān)文章、最新文章、文章列表中的縮略圖還沒有添加對(duì)應(yīng)的樣式。對(duì)于這些，先森是直接在調(diào)用圖片時(shí)手動(dòng)添加樣式，直接加在functions.php中的函數(shù)，先森還沒去研究。先森的例子如下：

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

總結(jié)

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

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

歷史上的今天:

• 2017:  參加《縫紉機(jī)樂隊(duì)》點(diǎn)映及主演喬杉映后見面會(huì)(2)
• 2015:  成都航空職業(yè)技術(shù)學(xué)院校歌——“成航之歌”(1)
• 2015:  成都航院志愿者圓滿完成殘運(yùn)會(huì)開幕式表演任務(wù)(0)