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

7294 查看	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)

顶端

底部

ygr1971 当前离线

1404 主题	44 广播	45 粉丝

级别:版主

用户积分:8683 分
登录次数:124 次
注册时间:2011/11/13
最后登录:2021/11/2

ygr1971 发表于：2012/3/12 12:08:40 | 只看该作者查看该作者主题沙发

做考试题库就用#科汛在线考试系统!

多谢分享.

欢迎光临师易网http://www.shiyi910.com[/url]

有课程找生源就上科汛课堂街

支持(0) |

反对(0)

顶端

底部

sujiaopaodao 当前离线

343 主题	0 广播	0 粉丝

级别:三年级

用户积分:356 分
登录次数:43 次
注册时间:2011/11/30
最后登录:2016/5/15

sujiaopaodao 发表于：2012/3/12 12:14:45 | 只看该作者查看该作者主题藤椅

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

, 大连地坪[/url], 兰纳足贴[/url]

一分钟快速开通线上知识店铺

支持(0) |

反对(0)

顶端

底部

fansun1889 当前离线

39 主题	0 广播	0 粉丝

级别:学前班

用户积分:38 分
登录次数:4 次
注册时间:2012/3/1
最后登录:2012/8/2

fansun1889 发表于：2012/3/12 15:56:02 | 只看该作者查看该作者主题板凳

一分钟快速开通线上知识店铺

这个系统还是很复杂的啊很多时候都能用的上我要加油了

九阳豆浆机http://jiuyang.yunhost.org 唐诗专卖店http://tonlion.yunhost.org 皙肤泉旗舰店xifuquan.yunhost.org

有课程找生源就上科汛课堂街

支持(0) |

反对(0)

顶端

底部

ailuweisi 当前离线

342 主题	0 广播	0 粉丝

级别:二年级

用户积分:575 分
登录次数:15 次
注册时间:2008/1/17
最后登录:2012/3/29

ailuweisi 发表于：2012/3/13 8:58:49 | 只看该作者查看该作者主题报纸

有课程找生源就上科汛课堂街

哈哈笑死我了

洛阳最好的专业妇产科***[/url]
洛阳做无痛***最好的******[/url]

一分钟快速开通线上知识店铺

支持(0) |

反对(0)

顶端

底部

keesky 当前离线

18 主题	0 广播	0 粉丝

级别:学前班

用户积分:17 分
登录次数:2 次
注册时间:2011/9/16
最后登录:2012/3/13

keesky 发表于：2012/3/13 20:05:57 | 只看该作者查看该作者主题地板

有生源找课程就上科汛课堂街!

多谢分享了，这功能很实用！

<a href=http://www.taomanzu.com/ target=_blank>tbw淘宝商城</a> <a href=http://www.odewo.com/ target=_blank>淘宝正品商城</a> <a href=http://www.taomingqi.com/ target=_blank>淘宝特价商城</a> <a href=http://www.odewo.com/ target=_blank>taoba</a> <a href=http://www.caihua.cc/ target=_blank>淘宝购物分享</a>

一分钟快速开通线上知识店铺

支持(0) |

反对(0)

顶端

底部