上一節隨筆中，我們已經知道了關于插件基本的知識；那么現在看一下實例：
首先，要知道我們應該實現什么功能？
（1）圖片能夠實現上傳預覽功能
（2）拖拽裁剪圖片，使其能夠顯示裁剪后的區域
（3）顯示要裁剪區域的坐標
其次，該如何引用該插件呢？
那就具體看一下吧！
第一步：先將樣式和文件包引入（根據你自己的位置引入）
第二步：先用div布局樣式,如下圖所示
親，請上傳圖片并裁剪
選區預覽
坐標
X1:
Y1:
X2:
Y2:
css樣式：
第三步：實現圖片的上傳預覽效果
思路：通過input 將圖片的 src傳給第一個imgjs圖片上傳好用的插件，然后再將第一個img的src傳給第二個img的src
這樣，就能夠實現如下效果：
點擊瀏覽
點擊選擇 ：
第四步：實現區域選擇功能
這樣就可以實現如下效果啦~~~
到這一步就可以實現頭像的上傳以及裁剪功能了，當然后期還要將路徑添加到數據庫就更完美了~~~~
（------------------------------------------------------------------------此處應有分割線----------------------------------------------------------------------）
如果你只想實現簡單的圖片裁剪功能，那么可以看看下面代碼，此處不做注釋了~~~
當然，如果上邊的代碼看不太明白，也可以參照下面的這個進行修改，將圖片上傳預覽功能添加上即可哈~~~~
效果圖：（對比圖片就可以知道，下面這個就只是少了瀏覽功能js圖片上傳好用的插件，其他完全一樣）
Click and drag on the image to select an area.
Selection Preview
Coordinates
X1: Y1: X2: Y2:
未完待續，明天還有一個小例子~~~
it's a good day today, hope your Mrs Right is with you and the same as the next 520~~~if not, that your Mrs Right is on the way, and maybe on next 520, you will be one of the ~~~~
