最近给编辑做了个截图工具
一、功能:
A:图片自动载入
B:图片载入时,截取工具大小为图片大小
C:所截取图片长宽比例2.5:1
二、引用插件:jquery.Jcrop.js
三、代码
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>图片处理工具</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.Jcrop.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.imgareaselect-width.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="css/demos.css" type="text/css" />
<script type="text/javascript">
jQuery(function($){
var jcrop_api, boundx, boundy;
imgReady('img/1.jpg', function (){
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
onRelease: clearCoords,
aspectRatio: 2.5,
setSelect: [ 0, 0, this.width, this.height/2.5 ]
},function(){
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
});
});
function updatePreview(c){
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
if (parseInt(c.w) > 0){
var rx = 400 / c.w;
var ry = 160 / c.h;
$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
});
function clearCoords(){
$('#coords input').val('');
};
</script>
</head>
分享到:
相关推荐
参数值:图片上传前限制的文件扩展名列表,默认为:jpg,jpeg,gif,png,建议与服务端扩展名检查列表一致 upFlashUrl:动画文件上传接收URL 参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用...
3)文字水印调整为只添加到图像宽高>100像素的图片上面,并且调整编辑器默认配置添加的是图片水印! 2010/04/02 Version 6.1.6 For VS2005/2008 Updates: 1)针对IIS6.0文件解析高危漏洞进行修正。 2)上传功能的...
图片和头像lazyload按需异步加载提速、JS文件托管、jQuery可选底部加载 会员中心: 找回密码、登录、注册、找回密码 2种列表模式: 单图展示、无图展示 2种可选框架: 支持1栏和2栏 多种颜色: 14种可选颜色风格和...
(此功能测试稳定后会改为默认功能,即控件默认状态下输出的就是符合XHTML标准的代码,现在暂时请用xhtml属性来开启转换) 2008/6/23 Version 5.0.6 For VS2005/2008 Updates: 1)修正控件Length属性统计的字符...
wordpreeDUX主题 ...网页最大宽度 你可以调整页面显示的宽度了,不过默认是很不错的 首页关键字和描述 设置你自己的很重要,更有利于SEO 网站底部信息 你可以增加网站底部显示信息,比如:网站地图
网页最大宽度:你可以调整页面显示的宽度了,不过默认是很不错的 首页关键字和描述:设置你自己的很重要,更有利于SEO 网站底部信息:你可以增加网站底部显示信息,比如:网站地图 侧栏随动:每种页面可设置不同...
网页最大宽度:你可以调整页面显示的宽度了,不过默认是很不错的 首页关键字和描述:设置你自己的很重要,更有利于SEO 网站底部信息:你可以增加网站底部显示信息,比如:网站地图 侧栏随动:每种页面可设置不同的侧栏随...
网页最大宽度:你可以调整页面显示的宽度了,不过默认是很不错的 首页关键字和描述:设置你自己的很重要,更有利于SEO 网站底部信息:你可以增加网站底部显示信息,比如:网站地图 侧栏随动:每种页面可设置不同的侧栏随...
5.[改变]后台 新增栏目 次页显示模式默认为【图+摘要1】,首页栏目图片文章默认开启 6.[改变]前台网站公告、搜索结果默认显示模式为【图+摘要1】 7.[改变]RSS调用默认调用数量从20改成50 2013年04月15日 V2.73更新...
-为按钮增加DisableControlBeforePostBack属性 - 回发之前是否禁用按钮,防止重复提交 - 默认为true。 -Grid的Values属性访问限制由internal改为public,这就意味这可以自由改变Grid中每个单元格的值了。 -增加...
-为按钮增加DisableControlBeforePostBack属性 - 回发之前是否禁用按钮,防止重复提交 - 默认为true。 -Grid的Values属性访问限制由internal改为public,这就意味这可以自由改变Grid中每个单元格的值了。 -增加...
10、为附件箱图片增加预览功能 11、修复登录验证码开关的小BUG 12、CSS调整,增加style文件夹,统一放置CSS 13、修改签到组弹出框样式 14、修改在线更新版本对比代码段,修正了一个无外网连接时AJAX机制报错的BUG ...
不为空则调用分类名Gravatar选择:可以是官方ssl,可以是默认,可以是多说聚合文章小工具:侧栏聚合文章小工具新增显示纯图片模式;列表模式:列表模式新增4图模式特别推荐小工具:新增特别推荐小工具,多种样式;...