未老人的手扎

童顏未老人

　這次的新需求是，會員要可以上傳自己喜愛的照片，而且要大小不拘，然後需由每一張圖居中的取出最大範圍的正方形圖後，在把他縮小到 60 X 60 的大小去，再存到系統上面去，這樣一來可以減低系統的硬碟的負擔。要作到這樣的話，就必需要利用到 GD 的函數了。

　例如，一張 1600 X 1200 的照片上傳以後，需先拮取其中的 1200 X 1200 (中心點不變)，再將其縮小成 60 X 60 的圖片！

　在主要的輸入畫面上：

<form name="frm" method="POST" action="loadpic.php" enctype="multipart/form-data">
<input id="filename" type="file" size="45" name="filename">( 請上傳您的個人照片！)
<input type="submit" name="doit" value="送出">
</form>

在這裏最重要的是在 <form> 中必需要加上 enctype="multipart/form-data"！

而在 loadpic.php 這隻主要程式中，應如下的寫：

先定義出一個 function 用來抓副檔名：

function getFiletype ($FileName) {
$num=strrpos($FileName,".");
return ".".substr($FileName,$num+1);
}

// 取得上傳的圖片
$src = imagecreatefromjpeg($_FILES['filename']['tmp_name']);

// 取得圖片的寬
$src_w = imagesx($src);

// 取得圖片的長
$src_h = imagesy($src);

// 取得圖片的副檔名 ( 如 jpg, gif... )
$src_type = strtolower(getFiletype($_FILES["filename"]["name"]));

// 依長與寬兩者最短的邊來算出要抓的正方形邊長
if( $src_w > $src_h){
$new_w = $src_h;
$new_h = $src_h;
}else{
$new_w = $src_w;
$new_h = $src_w;
}

// 以長方形的中心來取得正方形的左上方原點
$srt_w = ( $src_w - $new_w ) / 2;
$srt_h = ( $src_h - $new_h ) / 2;

// 定義一個圖形 ( 針對正方形圖形 )
$newpc = imagecreatetruecolor($new_w,$new_h);

// 抓取正方形的截圖
imagecopy($newpc, $src, 0, 0, $srt_w, $srt_h, $new_w, $new_h );

// 建立縮圖
$finpic = imagecreatetruecolor(60,60);

// 開始縮圖
imagecopyresampled($finpic, $newpc, 0, 0, 0, 0, 60, 60, $new_w, $new_h);

// 儲存縮圖到指定的目錄存放 , 檔名就是記錄在 SESSION 中的 login name
imagejpeg($finpic,
"../../images/Upload/Users/".$_SESSION["MemberLoginName"].$src_type);

// 將檔名存到變數 $filename 去,以備記錄到 table 去，方便日後依會員的帳號來抓取圖片
$filename = $_SESSION["MemberLoginName"].$src_type;

大功告成！

童顏未老人

　剛剛試出一個或許對眾高手來說，是很簡單而且不太入流的技術，不過這可是我弄了好久才學到的。特別記錄下來免的以後會忘了。

　是這樣的，我希望在網頁上當使用者將滑鼠移動到某個物件上面時，右下方就會跳出一個簡單的說明，如下圖：

　這原本是不難的，只要用 title 這屬性就可以作到了，但是那樣的話，字會很小，而且沒什麼變化，對年繼大的人來說頗不友善的。於是我便動到 css 的頭上，再參考到網路上一個高手的作法，我略加修改一下，就相當的適合我用了。

首先定義一下 css 的部份


<style type="text/css">
.info {position:relative;}
.info:hover {background:#eee;color:#333;}
.info span {display: none }
.info:hover span {
       display:block;
    position:absolute;
    top:30px;
    left:60px;
    width:400px;
       border:1px solid #ff0000; 
    background:#FDFFB4; 
    color:#000000;
    padding:5px;
    text-align:left;
    z-index:9;
    text-decoration:none;}
</style>

然後對於目標的地方修改如下：


<a href="../News/List.phtml?StarID=<?echo $StarID?>" class="info">
 <img src="../images/bt042.gif" name="Image0_4" 
     id="Image0_4" width="92" height="26" border="0">
 <span>隨時將五大星球最新的資訊及活動傳達給您。</span></a>

主要的用意便是，想透過 <a> </a>裏面所包的 <span> 來顯示出那段說明。但是當游標尚未進入前，這段 span 先用 display:none; 來讓它隱藏起來。

當滑鼠的游標進入標的時，再用 display:block;的方式讓它出現，並在設定一下表現方式 ( 離游標的位置、字體、顏色‧‧‧ )

當然了 <a> 元素不要忘了設定一下 class="info" ！

還有 info 本身要設定為 position:relative; ，否則那個說明會固定在畫面的左上角！

這樣就可以達到我想要的目標！ :)

童顏未老人

　微軟的 ie 有點討厭，一些 html 的語法就是要與別人的不一樣，最近為了要讓自家公司的網頁能通吃 ie、 firefox ，於是下了苦心去調整程式。

　之前公司的在繪製長條圖時，都是採用圖片，然後再利用 width 的屬性來將其拉長到想要的長度！不過後來連圖也不想用了，畢竟圖還是有一點大小，為了省下一點點的速度，所以把它換成 html 的語法。

　當時採用的是

，這個繪製水平線的標籤。因為要區分嚴重性，所以線本身需要顏色管理，因此在

裏面特用了 css 的 style 來設定它的顏色和厚度。而且

在 default 上周在上下兩邊會有一點 margin，所以當時是如此下：

　其結果在 ie 中能得到滿意的效果，如下圖：

　但是在 firefox 中，卻是慘不忍睹，如下：

　於是經過一番測試後終於了解到，firefox 當設立 height 後，水平線本身是中空的， css 中的 color 所指定的顏色通通沒用。而且 firefox 對於

的上下 default margin 也和 ie 不同，所以程式有得依 ie 和 firefox 的不同來分別設定了！

　這樣一來， ie 還是可以好好的保遲原來的效果， firefox 的效果也能令人滿意了！

童顏未老人

　最近一直被 php 的 gd 繪圖所困擾到，應該說不是 gd 繪圖本身的問題。而是利用它所繪制出來的曲線圖，在 ie 中可以順利的展現出來，但是到了 firefox 中時竟然 show 不出那圖來，他直接就把整串的網址 show 出來。我甚至還試著單讀獨寫一隻 html 去抓那張 gd 所繪出來的圖
，結果顯示也是很是正常，無論在 ie 或是 firefox 都一樣。看來是 firefox 面對 gd 產生圖片的程式與 show圖的地方寫在一起時會有問題。

在 ie 中的展示如下：

但在 firefox 下就變成這樣了：

　在網路上一直找不到有這方面的說明，那只好自己先用鋸箭法的方式來處理了 !

　先在原來的程式中去判斷使用者的瀏覽器是那一個, 當是 ie 系列的，就照原來的去 show；若不是時，便去跑另一隻專門 show 圖的程式 !

至於另一隻 show 圖程式便簡單多了，如下圖，當然了前方會有一些控制的語法就不 show 出來了！

結果還令人頗滿意的！

童顏未老人

　最近公司的美術設計工作太忙，我手邊又有一些簡單的配色要問他，再打擾他幾次後我自己都覺得很不好意思，偏偏我有只有一個 jpeg 的示意圖初稿，想先動一下都很麻煩。之前我都是用 photoshop 把 jpeg 檔讀入，然後再去抓它的色碼。這實在是很笨的作法，有殺雞用牛刀的感覺。

　所以我再想一定有更簡單的軟體來作這種事，於是我再度求助於萬能的 google 大神，幾經折騰後，被我找到一套既簡單又小巧的軟體， ColorSPY ，不但操作容易更重要的是它還是綠色軟體，對於有這方面需求的人，我是極度推薦它。

　下載網址： ColorSPY

　下載後，會得到一個 cspy20b.exe 的壓縮執行檔，解開後有兩個檔 ColorSpy.exe 和 Readme.txt。後者只是簡單的說明，可以不理它。 ColorSPY.exe 就是執行檔，將它 copy 到桌面方便點選的地方即可。

　需要用到時，直接執行 ColorSpy.exe ，完全不必安裝。使用時更為簡單。只要滑鼠移動到螢幕上的任何地方，它自動會把色碼和 RGB 三原色顯示出來，非常簡單。倘若不需要再查詢時，僅僅點選 pause 讓它不要再抓滑鼠所處的顏色色碼就好了；若要再用時點選 resume 就可以恢復作業，極度的方便吧！

未老人的手扎

2009/1/12

php : 上傳圖片後再切出並縮小成正方形圖《by 童顏未老人》

2009/1/10

利用 css 來做到 title/alt 的功能《by 童顏未老人》

2009/1/7

水平線標籤在 ie 和 firefox 之不同的解決《by 童顏未老人》

php 的 gd 繪圖與 firefox 八字不合的處理《by 童顏未老人》

2009/1/6

抓取螢幕上任一地方顏色的好工具 ColorSPY 《by 童顏未老人》

計數器