图片截图工具
最近给编辑做了个截图工具
一、功能：
A：图片自动载入
B：图片载入时，截取工具大小为图片大小
C：所截取图片长宽比例2.5:1
二、引用插件：jquery.Jcrop.js
三、代码
[html]
<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>
补充：Web开发 , 其他 ,
