序一

　　很久之前就在一個網(wǎng)站的截取相片的功能中看到這個效果，也叫圖片裁剪、圖片剪切（設置一下也可以做出放大鏡等類似的效果）。
　　當時覺得很神奇，礙于水平有限，沒做出來。
　　前些日子突然想做一個透鏡效果，就突然想到了這個效果，于是找出當年“珍藏”的代碼決定一嘗所愿。

序二

　　自上一個版本的圖片切割效果出來后，雖然也經(jīng)常看到“框架開發(fā)這個如何如何容易”之類的評論，但也受到很多人的肯定，小弟在此感謝大家的支持。
　　上一個版本由于是初次接觸這類效果，而且是三個大功能一起開發(fā)，能力所限，所以僅僅是實現(xiàn)了效果就完成了。
　　后來我知道這個效果叫ImageCropper，找了些這類效果參考，完善了切割的部分。
　　近來我把其中的拖放效果和縮放效果單獨出來研究，經(jīng)過整理和完善，再套進切割效果，個人感覺效果已經(jīng)不錯了。
　　要說明的是這個只是一個效果，并不是真正的切割圖片，要獲取真正的切割圖片請參考圖片切割系統(tǒng)。

　　瀏覽效果請參考：http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html

　　（瀏覽完效果，你一定想知道其中的奧秘吧，那就聽我細細道來吧~）

程序說明

　　這個效果主要分三個部分：層的拖放、層的縮放、圖片切割（包括預覽）。
　　其中層的拖放和層的縮放我已經(jīng)在其他兩篇文章中有詳細說明，這里就說說圖片切割這部分吧。

【圖片切割】

　　關于圖片切割的設計，有三個方法：
　　1.定位四個半透明層，遮住要蓋住的部分，沒試過，感覺比較麻煩；
　　2.把圖片設為背景圖，通過設置背景圖的位置來實現(xiàn)，但這樣的缺點是只能按圖片的正常比例實現(xiàn)，不夠靈活；
　　3.把圖片放到切割對象里面，通過設置圖片的top和left實現(xiàn)，這個方法是可行，但下面有更簡單的方法實現(xiàn)；
　　4.通過設置圖片的clip來實現(xiàn)。

　　這里介紹方法4的實現(xiàn)方法，這個方法是從當年“珍藏”的代碼中看到的，先說說clip：
　　clip的作用是“檢索或設置對象的可視區(qū)域。可視區(qū)域外的部分是透明的。”
　　依據(jù)上-右-下-左的順序提供自對象左上角為(0,0)坐標計算的四個偏移數(shù)值來剪切。
　　例如：

it知識庫：JavaScript 圖片切割效果，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。