【筆記】如何使用GIMP裁剪圖片

裁剪這個功能應該是每個影像處理軟體必備的功能之一，在一開始學GIMP時，拜歐花了一些時間去找，所以先做筆記，免得忘了。

先開啟要做剪裁的圖片，再用選取工具選取要裁剪出來的區域：

再來點按【圖片】→【剪裁出選取區域】，就能完成：

【筆記】偵測滑鼠(事件)在Canvas上的位置

使用下列的方法，可以取得滑鼠在Canvas上，相對於Canvas左上角的X、Y的座標。

var getMousePos = function(cv, e){
 var rect = cv.getBoundingClientRect();
 return {
  x: e.clientX - rect.left,//相對於Canvas左上角的X座標
  y: e.clientY - rect.top,//相對於Canvas左上角的Y座標
  rectLeft : rect.left,
  rectTop : rect.top,
  clientX : e.clientX,
  clientY : e.clientY
 }
};

再來在Canvas中畫一個紅色矩形：

var ctx = cv.getContext('2d');
ctx.fillStyle = "#f00";
ctx.fillRect(10, 10, 50, 50);

在上方的Canvas中，紅色區塊相對於Canvas的X軸範圍是10~60，Y軸的範圍也是10~60，因此，我們只要判斷使用getMousePos取得的X、Y座標是落在這範圍內的，就可以針對滑鼠水落在紅色區塊時，去做一些事件上的處理。 先在html中新增一個div來顯示訊息

再來處理Canvas的onmousemove事件：

var cv = document.getElementById('mycv');
cv.addEventListener('mousemove', function(e){
var pos = getMousePos(cv, e);
if(pos.x >= 10 && pos.x <=60 && pos.y >= 10 && pos.y <=60){
 $('#desc').css({'top':pos.y + 'px', 'left':pos.x+'px'}).text('在紅色區塊中');
}else{
 $('#desc').css({'top':pos.y + 'px', 'left':pos.x+'px'}).text('不在紅色區塊中');
}

現在，把滑鼠移入紅色區塊和移出，會看到不同的訊息。

【筆記】使用Email寄送筆記至Evernote，自動分筆記本和標籤

使用Email是可以寄送筆記到Evernote上的，通常在你的帳戶資訊中，可以找到你個人所屬的寄送電子郵件地址，如在Android手機的版本，可以找到「Evernote電子郵件地址」：

或是在電腦上的版本，可以找到「記事電子郵件收件人」，如：

有一個方便的功能是，只要在郵件標題加上一些文字，寄送到Evernote時，就會自動幫你分好筆記本和標籤。

如你若要寄送筆記到名為「email」這個筆記本，並為這個記事標上「from_email」這個標籤的話，在Email的標題就這樣寫；「測試文@email#from_email」，如：

按傳送後，等不到一分鐘內，剛寄送的筆記就會出現在你的Evernote中，並幫你放在的

「email」筆記本下，並設定好「from_email」標籤。

請注意，目的地筆記本和要註記的標籤，在寄送前就需要已經存在。

若要在寄送時設定多個標籤，只要在郵件標題加入多個以「#」開頭的標籤即可。

參考來源：

• http://blog.evernote.com/blog/2010/03/16/emailing-into-evernote-just-got-better/

【分享】在Gmail快速搜尋「未讀郵件」

在Gmail中若要快速搜尋未讀信件，有個很方便的方法，只要在最上方的搜尋框中輸入「is:unread」，在中間顯示的信件就都是未讀信件：

若在手機或平板電腦中，使用Gmail的app來做搜尋，這招也是有效的哦！

【筆記】使用GIMP做馬賽克處理

有時要在網路上要貼一些圖片，會有需要把個資等其他不該或不想給人看到的部份做些處理，這時常使用處理方式非馬賽克若屬了。

使用GIMP來對圖像檔案做馬賽克處理是非常簡單的，下面用一個範例來說明。

開啟要處理的檔案後，先點選要選取區塊的工具，這裡使用工具箱中的【矩形選取工具】。

選好要做馬賽克處理的區塊：

再來點按【濾鏡】→【模糊化】→【馬賽克處理】：

出現馬賽克處理的小視窗後，調整需要的像素寬度和像素高度 (決定馬賽克格子的大小) 後，點按【確定】：

回到主視窗後，可以看到選取的區塊已經做了馬賽克處理：

最後，點按【檔案】→【匯出】，匯出所需要的格式就完成了，結果如：

【解決】如何處理Eclipse中SVN發出的「The working copy needs to be upgraded」問題

今天在Eclipse中，要從SVN更新檔案時，出現了「The working copy needs to be upgraded. svn: The working copy at 'C:\wamp\XXXXX' is too old (format 29) to work with client version '1.8.0 (r1490375)' (expects format 31). You need to upgrade the working copy first.」：

解決方法很簡單，點選使用SVN控管而發生錯誤的專案後，點按滑鼠右鍵，再選【Taem】→【Upgrade】，如下所示：

【筆記】簡介如何使用Gradle下載Spring

現在要使用Spring，進到Spring的官網後，好像、貌似、應該、一定是沒有令人喜躍的「Download」按鈕可以直接下載jar檔來使用，而是要使用Maven或Gradle等建構工具來做運用。

本來拜歐在試使用「有點認識又好像不怎麼認識」的Maven (而且對它還懷有莫名的恐懼)，因為對Gradle這自動化建構工具真的不認識，所幸有參加今年的Java認證日，聽到了良葛葛分享的「淺談 Groovy 與 Gradle」，而且在Spring官網中，有稍微教了一下如何使用Gradle，拜歐立馬放棄Maven，嘗試使用Gradle來運用Spring。

至於Gradle的介紹和使用，在CodeData中已有詳細介紹，拜歐就不在此野人獻曝了。這裡預設在電腦中已安裝Gradle，首先建立一個基本的Java專案後：

如上圖，在專案根目錄建立一個名為build.gradle的檔案，其內容如下：

apply plugin: 'java'
apply plugin: 'eclipse'

repositories { mavenCentral() }
dependencies {
    compile 'org.springframework:spring-context:4.0.0.RELEASE'
}

開啟命令提示字元，切換到專案的根目錄中，然後輸入「gradle eclipse」：

成功訊息如下：

再來在點選專案後，點按滑鼠右鍵再重新整理，會看到專案結構多了一個Referenced Libraries，點開，會看到在build.gradle中設定的相依Spring的jar檔：

正常情況下，每個jar檔後面就會有一串路徑，標明jar檔的所在目錄，再來就各自發揮了。

【分享】Spring與Struts2的Web應用程式

拜歐日前在複習Spring加上Struts2的Web應用程式時，有鑑於每次都要拉一堆jar檔，然後再一個個試，才讓程式可以執行過的過程非常繁雜，於是整理了一包可以跑的Web應用程式，可以在這裡下載。

下載完成後，只要解壓縮，再用Eclipse匯入後，就可以執行。

要匯入的jar檔如下，當初是先放一些基本的jar檔，然後啟動，若有報錯，再依報錯的訊息去找出缺的jar檔。

從上圖可以看出，使用的Spring版本為3.0.5，而Struts2版本為2.3.4.1，因為Struts2前陣子陸續有些安全性議題產生，建議自行再拉最新的jar回來替換。

【分享】如何在Eclipse中顯示「.」開頭等隱藏檔案，以Kepler Release Version為例

在Eclipse的Package Explorer或是Project Explorer中，有時我們想要檢視「.」開頭的檔案，如「.classpath」或「.htaccess」等，可是在Eclipse預設的檢視設定中，這些檔案是隱藏的，就需要手動做調整。

開啟Eclipse後，在左邊的Explorer的視景中，會有一個小小的倒三角形圖示：

點按這個圖示後，會出現選單，再選擇【Customize View...】開啟設定視窗：

在設定視窗中，選到Filters頁籤，把「.* resources」這個選項的勾勾取消掉後，按【OK】完成設定：

回來再看Explorer視景中的檔案清單，有「.」開頭的檔案已經顯示出來：

【筆記】使用GIMP做圖像去背

GIMP這套不用錢，而且有完整文件的圖像處理軟體，愈用愈覺得不好好學它，那就可惜了。

今天練習用他來幫圖像去背。

若是要去除單一顏色的背景，可以先參考【筆記】使用GIMP去背(去除單一顏色背景)。

先開啟要去背的圖片後，這裡使用工具箱中的自由選取工具來選取要留下來的前景圖像，可以在工具箱中點按圖示來開啟：

或是點按選單列的【工具】→【選取工具】→【自由選取】來開啟選取工具。

選取好了之後，被選取的前景圖像應該會有虛線圍著，如：

再來就是要把選取的地方換成背景，點選【選取】→【反轉】，來選取背景：

再來要把背景變成透明，點選【圖層】→【透明度】→【加入透明色板】：

接著就是把背景清除，點選【編輯】→【清除】來清除背景圖像：

完成之後，應該看到除了要保留的前景圖像之外，其他的部份應該都變成透明：

最後就是要把處理好的圖像匯出，點選【檔案】→【匯出】開啟匯出圖片的視窗：

這裡要注意的是，因為要匯出的圖像背景是透明的，所以匯出的圖像格式必須選擇有支援透明的格式，這裡選擇的是PNG，輸入要匯出的名稱後，點按【匯出】，此時會再出現一個小視窗給我們做些設定，這裡把「Save background color」的勾選取消：

再點按【匯出】鈕，就大功告成了。

【筆記】GIMP (v2.8.8)更改介面語系

像GIMP這種功能強大的軟體，有時看英文介面可能有些選項比較難去暸解中文意義，這時可以將介面切換成自己比較習慣的語言，像我們習慣的繁體中文。

點按【Edit】→【Preference】開啟徧好設定視窗。

在左側選單中，點按【Integerface】，此時右邊會現在Language的設定。

在「Language」的下拉選單中，找到Chineses[zh_TW]後點按【OK】儲存設定後，重新開啟GIMP。

重新開後，可以看到介面已經變成我們熟悉的繁體中文介面了。

【筆記】在PHP中做日期時間的處理

在PHP中要處理日期，第一個想到的就是使用DateTime這個類別，它的建構子接受兩個參數，第一是表示時間的字串，如：「NOW」、「2013-01-01」等，第二個是表示時區的DateTimeZone類別，這兩個參數都是可以忽略的。

比如，你要取得現在時間，就可以直接這樣寫：

$today = new DateTime();
echo $today->format('Y-m-d H:i:s'); 
//執行結果為：2013-12-05 16:34:47

上列的執行的結果可以會和電腦顯示的時間不一樣，這是因為PHP時區設定的關係，可以去更改PHP的設定，或是在DateTime建構方法傳入DateTimeZone參數，並設定我們需要的時間字串：

//設定時間區為台北
$today = new DateTime('NOW', new DateTimeZone('Asia/Taipei'));
echo $today->format('Y-m-d H:i:s');
//執行結果為：2013-12-06 00:34:47

若是你要取得某一個自訂日期時間，就可以直接這樣寫：

$someDay = new DateTime('2010-08-08');
echo $someDay->format('Y-m-d');
//執行結果為：2010-08-08

上列的DateTime所擁有的format，是用來做日期格式化的方法，其格式字串，「Y」表示是要格式化成4位數的西元年，「m」為「01到12」的月份，「d」為「01到31」的那一天，「H」表顯示為24小時制的時，而「i」表顯示為「00到59」的分鐘部份，「s」表「00到59」的格式來顯示秒數，詳細的格式化字串格式可以參考date方法的說明。

再來，要做日期的加減，要使用到DateTime類別的add方法，再搭配DateInterval類別來實現，比如想取得三個月後的日期：

$today = new DateTime('NOW', new DateTimeZone('Asia/Taipei'));
$today->add(new DateInterval('P3M'));
echo $today->format('Y-m-d');
//執行結果為：2014-03-06

若要取得三個月前的日期，就使用DateTime類別的sub方法

$today = new DateTime('NOW', new DateTimeZone('Asia/Taipei'));
$today->sub(new DateInterval('P3M'));
echo $today->format('Y-m-d');
//執行結果：2013-09-06

在上列的DateInterval類別建構子字串參數，若要加減1年就傳「P1Y」，要加減1個月就傳「P1M」，要加減1天就傳「P1D」，要加減1年2個月又3天就傳「P1Y2M3D」，依此類推。

【筆記】使用GIMP做圖片地圖超連結 (image map)

拜歐很早之前就曉得在網頁中可以用圖像來做圖像地圖 (image map)，但真正有機會實作，最近真是生平第一次，而之前知道的工具有Dreamwaver，但這工具是需要版權的，所以就google找了一下，也可以使用GIMP (GNU Image Manipulation Program) 來做。

GIMP是一套免費的，但功能強大的圖像處理軟體，先到官網下載最新版本回來安裝，拜歐這裡是使用免安裝版本，版本是2.8.8。

安裝完成後，就直接點按【File】→【Open】開啟要製作地圖的圖像。

再來點按【Filters】→【Web】→【Image Map】開啟製作圖像地圖的視窗。開啟的選單路徑可能依版本不同，在不同的地方。

 視窗開啟後，可以看到在視窗的左邊，有三個常見於製作影像地圖軟體的圖示：

在這個範例中，拜歐使用最上方的「矩形」圖示，把ASK這個logo給標示出來，當開始標示時，滑鼠會變成如下列紅框中的十字圖示，表示框出矩形區域的起點：

當框好需要的區域後，再點按滑鼠左鍵一下，就會完成矩形區域的選取，在原梧的視窗會顯示出所選取的區域範圍：

 

此時也會同時跑出圖像地圖的設定對話窗：

上列中，「URL to activate when this area is clicked: (required)」是一個必填欄位，也就是當點按到這一個區域時，所要前往的網址，或者可以填入「#」，之後再使用JavaScript來動態設定。這裡拜歐填入ask.com的網址。

另外在「ALT Text」中，可以填入當使用者將滑鼠移到這塊區域時，所要顯示的提示。按下「OK」，即可完成第一設定。這時回到圖像地圖的視窗時，會發現右邊出現了剛才的第一個設定，這時可以點按中間的「紙筆」圖示來做編輯，或點按「垃圾桶」圖示來刪除圖像區域的設定：

做到這裡，其實已經很接近拜歐想要的東西： 包在map標籤中的area標籤的coords屬性的值，在Image Map的視窗中，點按【View】→【Source...】，就會跑出一個 View Source 的小視窗，其中就是上列所述的 html 字段。

其中html字段如下：

在上列的 html 中，area標籤的shape屬性就是表示剛才選取區域時，使用矩形的結果，若是使用圓形去選取，就會是circle，若使用多邊形去選取區域，值就是poly，而coords的四個數字，就是代表這個矩形的左上角的x、y座標與右下角的x、y座標。

使用圓形的步驟和矩形相同，若使用多邊形時，要注意的是，點滑鼠左鍵一下，就會連成一個邊，若要回覆，就點按滑鼠右鍵，若要完成選取，就點滑鼠左鍵兩下。

參考來源：

•  http://www.makeuseof.com/tag/create-image-map-gimp/

【筆記】Colorbox - 好用的jQuery燈箱插件 (jQuery lightbox plugin)

之前看同事已有採用Colorbox這個jQuery插件來做網頁燈箱，最近拜歐剛好有需要在網頁上實作燈箱的需要，終於能夠深入一探它的好用。

一進入到Colorbox的開發者網頁，就闡明Colorbox是「一個輕量級、可客製化的jQuery燈箱插件」 (A lightweight customizable lightbox plugin for jQuery)，拜歐在使用的過程也是有這種體會：「好用」，那就直接來個初體驗吧！

因為是jQuery的插件，所以在引入前，應該先引入jQuery函式庫，先在<body>的最下方引入JS檔案：

另外記得在<head>引入css檔案：

接著加入一個button，等下用來觸發燈箱：

開始撰寫JS程式碼：

(function(){
 $('button').on('click', function(){
  $.colorbox({
   html : '

Hello lightbox!!!
', //在燈箱中要顯示的html字段
   width : 700, //燈箱中間區塊的寬度
   height : 600, //燈箱中間區塊的高度
   onClosed : function(){ //當燈箱關閉時的callback funtion
    alert('Lightbox is closed');
   }
  });
 });
})();

上列中要傳入的參數其實滿多的，以方便客製化，除了在燈箱中可以放入字段，也可以顯示照片，或嵌入一個iframe，詳細參數列表，可以參考上列的開發者網站。

執行後的結果如：

拜歐在上列的程式碼中，有加入一個onClosed的callback function，就是在燈箱關閉後，會去執行，在此練習，就是直接altert一段訊息。

關閉上列的燈箱後，接著就會跳出下列訊息：

練習程式碼下載。

【筆記】使用Handlebars JS函式庫實做項目列表

之前在Handlebars的初體驗中，有介紹Handlebars這個JavaScript的函式庫做樣版的替換，拜歐在後續的研讀中發現，用這個函式來做項目列表，好像也是不錯的選擇。

拜歐使用一個包含多個物件的陣列來做了一個範例，實際上運用應該是使用Ajax向伺服器端要求一串JSON字串，再來替換樣版成所需要的HTML字段。

首先一樣在<body>的最下方加入要引用的JS檔：

再來一樣加入一個樣板如：

這裡要注意的是，用了{{#each this}}和{{/ecah}}把<li>包住。 最後開是JavaScript的程式碼：

(function(){
 //現在我們要替換的是一個陣列
 var bookArr = [
   {title : "First book", author : "Javakid"},
   {title : "Second book", author : "Javakid2"},
   {title : "Third book", author : "Javakid3"}
 ];
 var template = Handlebars.compile($('#booklist').html()); //取得id為booklist的script中的html字段
 $('ul.books').append(template(bookArr)); //把上面陣列的內容替換為樣板中的內容
})();

執行後結果如：

原始檔可以在這裡下載。

【分享】如何使用iTunes將歌曲轉換成其他檔案格式，以mp3為例

在iTunes中，可以依下列步驟來將歌曲轉換成其他格式。

若有顯示【功能表】的話，就點按【編輯】→【徧好設定】，如沒有顯示功能表，直接點iTunes視窗左上方的圖示開啟【徧好設定】的對話窗，如下圖，或直接使用快捷鍵「Ctrl + ,」 來開啟：

 開啟後，在【一般】頁籤中，找到【匯入設定...】的按鈕，點按後，開啟【匯入設定】對話窗：

在【匯入設定】中，在「匯入時使用」旁的下拉選項中，選擇「MP3 編輯器」後，按【確定】儲存設定：

若要開始轉換歌曲格式，在iTunes視窗中，選擇要轉換的歌曲，點按滑鼠右鍵，再選擇【製作 MP3 版本】：

完成後，對同一首歌曲點按滑鼠右鍵，這次選擇 【在 Windows 檔案總管中顯示】：

 此時就會開啟視窗顯示該歌曲的「m4a」格式檔案，和一個新轉換的「mp3」格式檔案：

參考來源：http://support.apple.com/kb/HT1550?viewlocale=zh_TW