由于目前未出新版本，新版本出来也不知道会不会改良这个图片裁剪功能,所以就自已动手修改一下。

　　本修改针对kesion7.04,其它近似版本可以直接参考着修改。

　　需要修改的文件:plug/ImgCut.asp

　　修改后实现的功能有：拖动裁剪框时可以即时显示裁剪框尺寸,可以手动指定裁剪框尺寸，可以放大缩小原图尺寸。

　　修改方法其实很简单，因为其js框架文件其实都已经包含了这些功能了，所以我们基本上并不需要修改js框架内容，只需要在前台界面里添加修改些代码就能实现了。

　　本帖由http://hi.baidu.com/czhao123原创发表，欢迎转载欢迎交流学习。

　　分三步进行修改：

　　第一步：在以下代码

  <div id="bgDiv">

        <div id="dragDiv">

          <div id="rRightDown"> </div>

          <div id="rLeftDown"> </div>

          <div id="rRightUp"> </div>

          <div id="rLeftUp"> </div>

          <div id="rRight"> </div>

          <div id="rLeft"> </div>

          <div id="rUp"> </div>

          <div id="rDown"></div>

        </div>

      </div>

后面添加(红字为添加的代码)

   <div id="tools">

  <input value="缩小原图" type="button" id="idSize_small" />

  <input value="放大原图" type="button" id="idSize_big" />

  <input value="默认大小" type="button" id="idSize_old" />

  裁剪宽度：<input value="200" name="drag_w" id="drag_w" type="text" style="width:30px;"/> px

  裁剪高度：<input value="200" name="drag_h" id="drag_h" type="text" style="width:30px;"/> px

   </div>

　　第二步:给上面的几个按钮添加几个js功能进去，以实现各自的功能：(注：红字部分是我添加或修改的代码部分)

<script>

var h,w,ic;

//新定义几个变量，o_w：保存原始的宽,o_h：保存原始的高,max_w：最大宽度,max_h:最大高度

var o_w,o_h,max_w=620,max_h=600;

//================================================================================

$(document).ready(function(){

w=$("#si").width();

h=$("#si").height();

//=====================================

o_w=w;

o_h=h;

if (w>max_w) {w=max_w;o_w=max_w;}

if (h>max_h) {h=max_h;o_h=max_h;}

//=====================================

   ic = new ImgCropper("bgDiv", "dragDiv", "<%=PhotoUrl%>", {

  Width:w, Height: h, Color: "#999999",

  Resize: true,

  Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown",

  RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",

  Preview: "viewDiv", viewWidth: 200, viewHeight: 200

})

});

//预设裁剪框的宽高======================

$$("drag_w").onchange = function(){

v_drag_w=$$("drag_w").value;

$$("dragDiv").style.width=v_drag_w+"px";

v_drag_h=$$("drag_h").value;

$$("dragDiv").style.height=v_drag_h+"px";

ic.Resize=false;

ic.Init();

}

$$("drag_h").onchange = function(){

v_drag_w=$$("drag_w").value;

$$("dragDiv").style.width=v_drag_w+"px";

v_drag_h=$$("drag_h").value;

$$("dragDiv").style.height=v_drag_h+"px";

ic.Resize=false;

ic.Init();

}

//缩小原图尺寸

$$("idSize_small").onclick = function(){

w=w*0.9;

h=h*0.9;

if (w<10) w=10;

if (h<10) h=10;

ic.Width = w;

ic.Height = h;

ic.Init();

}

//放大原图尺寸

$$("idSize_big").onclick = function(){

w=w*1.1;

h=h*1.1;

if (w>max_w) w=max_w;

if (h>max_h) h=max_h;

ic.Width = w;

ic.Height = h;

ic.Init();

}

//还原原图尺寸

$$("idSize_old").onclick = function(){

w=o_w;

h=o_h;

ic.Width = w;

ic.Height = h;

ic.Init();

}

//=========================================

function Create(){

var p = ic.Url, o = ic.GetPos();

x = o.Left,

y = o.Top,

w = o.Width,

h = o.Height,

pw = ic._layBase.width,

ph = ic._layBase.height;

$("#myform").attr("action","ImgCutSave.asp?p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&pw=" + pw + "&ph=" + ph + "&" + Math.random());

$("#myform").submit();

}

$(function(){

//$("#bgDiv").width($("#bgDiv").find("img").width());

//$("#bgDiv").height($("#bgDiv").find("img").height());

$("#bgDiv").width=max_w;

$("#bgDiv").height=max_h;

});

</script>

　　第三步： 打开ks_inc/imgplus/resize.js，找到下面这段代码并添加红色部分。

  //缩放

  Resize: function(e) {

//清除选择

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

//执行缩放程序

this._fun(e);

//设置样式，变量必须大于等于0否则ie出错

with(this._obj.style){

  width = this._styleWidth + "px"; height = this._styleHeight + "px";

  top = this._styleTop + "px"; left = this._styleLeft + "px";

  

  //实现实时显示裁剪框尺寸

  $$("drag_w").value=this._styleWidth;

  $$("drag_h").value=this._styleHeight;

  //================

}

//附加程序

this.onResize();

  },

  //缩放程序

修改完毕，本帖由http://hi.baidu.com/czhao123原创发表，欢迎转载欢迎交流学习。

这个功能感觉不错，好好收藏玩一下，呵呵

优互：中国生活助理品牌创造者！

www.yohu.cc