圖片編輯器-裁切篇

圖片編輯器停頓了一陣子，因為自己不曉得在忙些什麼所以就一直放著沒寫；繼上次圖片編輯器-旋轉篇後，今天在來介紹一下裁切照片的部分，主要參考的外掛為JCrop，可以輕鬆達成以前端呈現裁切照片的效果，跨瀏覽器支援也相當完整（Firefox 2+、Safari 3+、Opera 9.5+、Google Chrome 0.2+、Internet Explorer 6+），除了一般裁切外還包括設定比例裁切、裁切縮圖、預設裁切區塊、裁切動畫與裁切背景顏色更換等功能相當齊全，並且有後端php程式教學，其完整demo展示在此。
在使用上並沒有什麼太大的問題，設定等比例裁切也相當方便，基本使用如下：

1. 載入jQuery與jCrop

<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" /> 



2. 載入所要裁切的照片ID
3. 參數設定

基本上使用與設定如上述所寫的，完整的使用說明請參閱。
在IE使用上有點小bug，就是當使用到等比例裁切時，會發生錯誤，於是就上網搜尋了一下解法，發現大家都有遇到此困擾，但是沒有看到相對應的解法，最後只有硬著頭皮去看source code。
結果在程式第230~240行左右有一個getFixed()的函式，裡面定義了兩個全域變數，分別為 h、w，可能是與其他區域變數有衝突而產生錯誤，於是將其定義改成區域變數就解決了！！

var aspect = options.aspectRatio,
min_x = options.minSize[0]/xscale, 
min_y = options.minSize[1]/yscale,
max_x = options.maxSize[0]/xscale, 
max_y = options.maxSize[1]/yscale,
rw = x2 - x1,
rh = y2 - y1,
rwa = Math.abs(rw),
rha = Math.abs(rh),
real_ratio = rwa / rha ? rwa / rha : 0,
xx, yy, w, h //w, h未宣告在 ie 上會發生錯誤，因此加上加上w, h宣告