Kesion V8.03后台图片裁剪实现实时显示裁剪框尺寸等功能-领先建站CMS提供服务商我们专注于CMS建站产品的研发

7286 查看	19 回复

主题：Kesion V8.03后台图片裁剪实现实时显示裁剪框尺寸等功能 [收藏主题]

转到：

悠客当前离线

213 主题	15 广播	7 粉丝

级别:二年级

用户积分:996 分
登录次数:401 次
注册时间:2010/11/8
最后登录:2019/10/28

悠客发表于：2012/3/12 11:59:35 | 显示全部帖子查看该作者主题楼主

做线上考试培训就选#科汛网校

原文参考：http://hi.baidu.com/czhao123/blog/item/1f48f4fcc17b33e9fd037f40.html

见论坛有童鞋说在Kesion V8.03后台无法实现此功能：http://bbs.kesion.com/forumthread-347005.html，今天抽空整理了下，其实代码差不多，按原文代码是可以顺利实现的。再次感谢原作者！

本方法需要修改plug/ImgCut.asp和ks_inc/imgplus/resize.js两个文件。

下面是修改方法：

一、打开plug/ImgCut.asp，找到

复制代码

#bgDiv{ min-height:400px;border:3px solid #000; position:relative;}
#tools{ margin:5px;}

对应添加红色部分。往下，继续查找

复制代码

<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="400" name="drag_w" id="drag_w" type="text" style="width:30px;"/> px
裁剪高度：<input value="300" name="drag_h" id="drag_h" type="text" style="width:30px;"/> px
</div>
</div></td>

对应添加红色部分。

二、给上面的几个按钮添加对应的js功能。往下查找

复制代码

<script>
var h,w,ic;
//新定义几个变量，o_w：保存原始的宽,o_h：保存原始的高,max_w：最大宽度,max_h:最大高度
var o_w,o_h,max_w=400,max_h=300;
$(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;}
//=====================================
if (w>400) w=400;
//if (h>600) h=600;
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文件，查找

复制代码

//设置样式，变量必须大于等于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();
},

对应添加红色部分。完工！

科讯NET交流群 321062970

做新职业技能培训平台就选#科汛网校

支持(1) |

反对(0)

顶端

底部

＜上一主题 | 下一主题＞

首页 1 2 末页下一页