教學文件:利用 DHTML 製作一個裁剪圖像的介面
阿恆
網上有很多圖像處理、相簿管理的網上應用系統,容許我們把大圖像裁剪為較小的圖像,但是用戶必須輸入裁剪框的座標和大小,對一般人來說顯然十分困難,Dave Dash 在 Spindrop 發表了一篇教學文件,指導我們怎樣利用 DHTML(JavaScript + CSS + HTML)來製作一個靈活易用的圖像裁剪介面。
在學習前不防先看看 Dave 的示範。
Dave 這個示範的靈感其實來自蘋果電腦中地址簿的一項功能,Dave 認為這是他見過最簡潔易用的圖像裁剪介面,所以利用它作為設計藍本製做了這個 DHTML 教學文件。這個示範用 PHP 在 Symfony(一個 PHP 開發架構)上開發,不過你們即使沒有安裝 Symfony 也一樣可以學習其中的技巧,唯一必需的是 PHP。
這個介面把收集到的座標送回伺服器,然後利用 GD 函式庫進行真正的裁剪工作,這部份工作 Dave 也做了詳細解釋,並且列出了全部原始碼。