在线剪裁图片jquery插件Jcrop - 中文文档

在线裁剪图片jquery插件Jcrop - 中文文档
<script src="js/jquery.pack.js"></script><script src="js/jquery.Jcrop.pack.js"></script><link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />?
注意:你也可以调整成其他的位置

调用
假如：

编写以下脚本

<script language="Javascript">    jQuery(function() {        jQuery('#cropbox').Jcrop();    });</script>

?

<script language="Javascript"> function showCoords(c) { // variables can be accessed here as // c.x, c.y, c.x2, c.y2, c.w, c.h //w宽度 h高度 x y 左上角 x2 y2右下角坐标 };</script>? <script language="Javascript"> jQuery(function() { jQuery('#cropbox').Jcrop({ onSelect: showCoords, onChange: showCoords }); });</script>?
这是一个标准的jquery语法，注意最后一个属性后面没有逗号

设置选项
参数名称??类型??描述??默认??
aspectRatio??decimal??设定宽高比 n/a??
minSize??array [ w, h ]??设置最小尺寸 n/a??
maxSize??array [ w, h ]??设置最大尺寸 n/a??
setSelect??array [ x, y, x2, y2 ]??设置一个初选框的位置 n/a??左上角右下角坐标
bgColor??color value??设置背景容器颜色 'black'??
bgOpacity??decimal 0 - 1??设置当图像被裁剪选框外的透明度 .6??

如：

<script language="Javascript">    jQuery(function() {        jQuery('#cropbox').Jcrop({            onSelect:    showCoords,            bgColor:     'black',            bgOpacity:   .4,            setSelect:   [ 100, 100, 50, 50 ],            aspectRatio: 16 / 9        });    });</script>

?

注意

?Text 必须有引号
?其他就不要有引号
?最后一个参数后面没有逗号

查看更多 下一篇