利用BitmapCutter實現截取圖片功能之修改加強版,兼容Jquery1.4.x以上版本

寫在前面的話:
原文章:  jQuery + HttpHandler 實現圖片裁剪(適用於論壇, SNS)
(不知是不是原文章,反正我是從哪裏看到的)
困惑:
我下載之後發現js的版本有點老,於是換上了jQuery1.4.4版本的jquery。
結果是無法拖動,無法上傳,無法反轉.....
鬱悶,網上一搜還真找到了解決的辦法?不過只解決了部分。還有部分沒解決,就是不能反轉。
鬱悶的我用火狐看了頁面提交的情況,同時也進行了調試,發現其實服務器端已經處理了數據,並且成功的返回了數據。
爲什麼就是沒有執行ajax的success方法呢?

解開困惑:
1、jquery.bitmapcutter.js文檔中有不兼容的寫法。
解決不能拖拽的問題。
需要在jquery.bitmapcutter.js文檔中修改幾處地方:
/*不兼容jQuery 1.4.4 的寫法*/
//$().unbind('mousemove', dragndrop.drag).unbind('mouseup', dragndrop.drop);
  $("#cutter").unbind('mousemove', dragndrop.drag).unbind('mouseup', dragndrop.drop);
/*不兼容jQuery 1.4.4 的寫法*/
//$().bind('mousemove', { d: data }, dragndrop.drag).bind('mouseup', dragndrop.drop); 
 $("#cutter").bind('mousemove', { d: data }, 
dragndrop.drag).bind('mouseup', dragndrop.drop);
//cutter 此處給cutter加上一個id
            var $cutter = $('<div id="cutter" class="jquery-bitmapcutter-cutter" >&nbsp</div>')
                .css(ps.cutterSize)
               .css({
               'opacity': .4,
               'left': (ps.holderSize.width - ps.cutterSize.width) / 2,
               'top': (ps.holderSize.height - ps.cutterSize.height) / 2
               }).appendTo($holder);



2、接下來解決不能翻轉的問題。前面已經說了了其實提交的數據已經被服務器端處理了也將數據返回來了。爲什麼就是不能成功呢?原因也很簡單,簡單到吐血。原因就是返回的Json數據的格式不是標準的。解決方案:在Callback.cs文件中修改放回的Json數據格式,
//非標準Json格式,在Jquery1.4.x目前測試1.4.2&1.4.4中是不正確的
 //return "{msg:'success',size:{width:" + nw.ToString() + ",height:" + nh.ToString() + "}}";
//標準Json格式,記得是雙引號,經測試單引號也不能被識別。
return "{\"msg\":\"success\",\"size\":{\"width\":\"" + nw.ToString() + "\",\"height\":\"" + nh.ToString() + "\"}}";

把callback中那幾個不標準的Json寫法改掉就ok了。

做了以上的修改之後這些修改之後,試試程序吧,呵呵 所有功能都實現了。
經測試,在火狐和ie下都能正常使用,並且換了幾個版本的jquery後也能正常使用。
測試了一下的jquery版本,均能正常使用。(環境:火狐7.1,ie8 ,vs 2008)
<%--<script src="javascript/jquery-1.6.min.js" type="text/javascript"></script>--%>
    <%--<script src="javascript/jquery-1.5.min.js" type="text/javascript"></script>--%>
    <%--<script src="javascript/jquery-1.4.4.min.js" type="text/javascript"></script>--%>
    <script type="text/javascript" src="javascript/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="javascript/jquery.bitmapcutter.js"></script>
    <link rel="Stylesheet" type="text/css" href="css/jquery.bitmapcutter.css" />
最後來幾張圖片吧:

QQ學習交流羣:63181865 歡迎一起學習。
推薦文章:圖片上傳_ajax上傳之實際應用(附上Demo)
Demo就不上傳了,可到jQuery + HttpHandler 實現圖片裁剪(適用於論壇, SNS)去下載原版Demo,根據文章中提到的修改方法修改即可。
接寫來將基於此,實現一個diy郵票的功能。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章