2014年7月12日

不用語法及後製, Picasa (G+相簿) 圖片立刻變成黑白(灰階)效果

A+
想要在網頁上呈現黑白(灰階)圖片效果,最簡單的方法就是利用影像軟體後製,操作熟練的話很快就能完成。不過,若是網頁有很多圖片、或是不定時需要灰階效果的話怎麼辦?重新上傳也是麻煩,這時如果能透過語法,只針對需要灰階的圖片進行處理,算是最方便的解決辦法。

CSS3 / HTML5 語法都可以做到這種特效,但可惜的是,不是每種瀏覽器版本都支援,要做到跨瀏覽器相容是一件痛苦的事,可參考這篇「使用CSS將圖片轉換成黑白」就能知道原因。目前比較完美的方法,就是安裝 js 外掛,利用程式運算來解決了。

而本文 WFU 要分享的技巧,不須靠後製、也不需要研究任何語法,只要使用 PICASA(Google+相簿) 的圖床,在圖片網址加上一些參數,就能變成黑白圖片。以下就來看看這個魔法,以及各種應用方式吧!



一、PICASA 圖片網址原理


PICASA 圖片網址的基本參數原理,可參考「Blogger 熱門文章+任意尺寸縮圖」→「一、PICASA 圖片規則」,利用改變參數的數字大小,就能改變圖片的尺寸。

不過除了圖片尺寸,PICASA 還能藉由改變參數來達到一些特效,則是從 +綜合口味 發表的這個「Blogger社群討論串」得知,加上一長串複雜的參數後,可以達到毛玻璃的效果。




例如上圖的網址為:"http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400/wfublog.jpg"

插入這行參數後:"-fcrop64=1,000007b9ffffd845:Soften=1,60,0"

圖片網址成為:"http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,000007b9ffffd845:Soften=1,60,0/wfublog.jpg"

效果就像下面這張糊掉了的圖片:




因此,關鍵在於調整 "fcrop64" 及 "Soften" 的參數。而找到其他特效參數的話,也能如法炮製,做出比美後製軟體的特效。,本文首先要介紹的是,算是滿實用的 "灰階" 特效。



二、灰階特效參數


1. 簡化參數

原本的字串 "fcrop64" 參數過長,且會裁切圖片。經測試後,參數可簡化為 "1,ffffffaa",並可維持原圖尺寸。


2. 灰階字串參數

最後找到的關鍵字串及參數為 "ansel=1,ffffff",後面的 "ffffff" 是色碼。


3. 不同色系的灰階消果

如果使用了 "ffffff" 參數,代表為一般的 "黑白" 效果,如果使用了不同的色碼代號,就能呈現各種灰階效果,以下使用三原色的色碼舉例(查詢色碼請參考「網頁色碼選擇器」)──




紅色:上圖使用色碼 "FF0000",圖片網址參數為──

  • http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,FF0000/wfublog.jpg




黃色:上圖使用色碼 "FFFF00",圖片網址參數為──

  • http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,FFFF00/wfublog.jpg




藍色:上圖使用色碼 "0000FF",圖片網址參數為──

  • http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,0000FF/wfublog.jpg


相信以上三種灰階效果,肉眼是可以分辨地出來。若真的看不出來(螢幕跟 WFU 一樣爛的話),可點擊這三張圖片另開分頁,在不同分頁間切換即可看出差別。而想顯示不同的灰階,只要置換其他不同的色碼即可。



三、Hover 效果應用


瞭解 PICASA 圖片灰階效果的參數如何使用後,接下來介紹一個簡單的 Hover 效果,將原本的圖片設定成黑白,滑鼠經過時顯示原圖,只要利用簡短的語法就能完成。

<img src="http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,FFFFFF/wfublog.jpg" onmouseover="this.src='http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400/wfublog.jpg'" onmouseout="this.src='http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,FFFFFF/wfublog.jpg'"/>
  • 以上程式碼的意思為,一開始圖片網址設定為黑白效果,使用了綠字參數 "-fcrop64=1,ffffffaa:ansel=1,FFFFFF"。
  • 滑鼠經過時(onmouseover),圖片網址改為原圖網址(沒有多餘參數)。
  • 滑鼠離開時(onmouseout),圖片網址改為黑白效果,使用綠字參數 "-fcrop64=1,ffffffaa:ansel=1,FFFFFF"。

想要測試效果,可以將滑鼠移到下面這張圖:





四、整個區塊的圖片變成黑白


這應該是更為實用的應用了,通常這樣的效果需要加裝外掛才能實現,現在只要在範本中加入幾行語法就能實現了。不過,或許以下內容至少需要基礎的 HTML 概念才能理解。

1. 添加 class 名稱

首先在想要實現灰階圖片的所有區塊,全部加上 class 名稱,就像 <div class="picasa-grayscale"> 這樣。(藍色字串名稱 "picasa-grayscale" 可自訂)

例如想把 Blogger 文章區塊的圖片都變成黑白,可在範本中搜尋 <div class='blog-posts...> 這樣的字串(有多處,每一處都要改),由於這個區塊已經設定了 class 屬性,那麼就在 class 的內容新增一個字串名稱,彼此用空白隔開,就像 <div class='picasa-grayscale blog-posts...> 這樣即可。


2. 安裝 js 程式碼

接著在範本中搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


請參考程式碼行號進行修改:

E:紅色字串可改為「1. 添加 class 名稱」的自訂名稱。

M:藍色字串即為灰階程度的參數,請參考「二、灰階特效參數」的說明來更改。



五、後話


幾個月前的太陽花學運,不少網站為表響應與支持,暫時將色調改為黑白。現在知道本文的技巧後,要做到這樣的特效就很容易了。以下是利用本文的程式碼,將 DEMO 網頁的圖片改為黑白的效果:



除了本文的灰階特效,後續會整理 PICASA 圖片其他比較實用的特效來介紹。新朋友若不想錯失本站的最新文章,建議可使用 RSS 或 Email 訂閱;如果找不到訂閱按鈕,可前往本站「訂閱網頁」。



PICASA 相關文章:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。