头像裁剪插件Jcrop的使用示例

来源：互联网发布：php 0字节截断编辑：程序博客网时间：2024/05/16 07:03

请在这里查看示例 ☞ Jcrop示例

1 Jcrop 是图像裁剪插件，可以实现QQ头像裁剪时的预览功能

2 具体使用原理：在前台确定图片需要裁剪的选框位置及尺寸后，将选框的详细数据传到后台，后台真正实现图片的裁剪，然后返回给前台一个裁剪好的图片链接，前台展现出来
3 兼容性：各大主流浏览器及ie8+
4 建议不要下载2.0.x版本，0.9.x就挺好

5 凡是块级元素都可以使用此插件(以body为例)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>demo</title>    <link rel="stylesheet" href="css/jquery.Jcrop.min.css">    <script src="../js/jquery-1.11.3.min.js"></script>    <script src="js/jquery.Jcrop.min.js"></script></head><style>    * {        padding: 0;        margin: 0;    }</style><body>    <input class="btn1" type="button" value="1改变图像来源" />    <input class="btn2" type="button" value="2设置选框大小(静态)" />    <input class="btn3" type="button" value="3设置选框大小(动态)" />    <input class="btn4" type="button" value="4显示选框尺寸" />    <input class="btn5" type="button" value="5显示图片原来尺寸" />    <input class="btn6" type="button" value="6显示图片被设置后的尺寸" />    <input class="btn7" type="button" value="7查看body使用插件效果" />        <p class="txt">以下一段测试示例</p>    <img src="../images/456.png" width="200" alt="" class="pic1">    <script>                var Jc = null;        $(".pic1").Jcrop({            //bgColor: "red",//改变遮罩的背景色(black)            //bgOpacity: 1,//改变遮罩的透明度(0.5)            //bgFade: true,            //aspectRatio: 1,//宽高比，当前为1:1(0为自由缩放)            boxWidth: 150,//宽、高建议只设置一个，因为它不会改变图片的缩放比,并且在这里设置宽高的权值是最高的，会覆盖样式里的大小(0为原图片大小)            //boxHeight: 400,//(0为原图片大小)            //minSize: [100, 100],//最小宽高            //maxSize: [200, 200],//最大宽高            onChange: function() {                $("p").text("选框改变时的事件");            },            onSelect: function() {                $("p").text("选框选定时的事件");            },            onDblClick: function() {                $("p").text("在选框内双击时的事件");            },            onRelease: function() {                $("p").text("取消选框时的事件");            },        }, function() {            Jc = this;//为了以下使用Jcrop的api方法        });                //改变图片资源        $(".btn1").click(function() {            Jc.setImage("../images/a1.png");        });        //设定选框大小(无缓动效果)        $(".btn2").click(function() {            Jc.setSelect([0, 0, 200, 300]);        });        //设定选框大小(有缓动效果)        $(".btn3").click(function() {            Jc.animateTo([0, 0, 300, 200]);        });        //显示选框的尺寸        $(".btn4").click(function() {            var size = Jc.tellSelect();            $("p").text("w:"+size.w+" h:"+size.h+" x:"+size.x+" y:"+size.y+" x2:"+size.x2+" y2:"+size.y2);        });        //显示图片整体尺寸        $(".btn5").click(function() {            var size = Jc.getBounds();            $("p").text("w:"+size[0]+" h:"+size[1]);        });        //显示图片被设置后的尺寸        $(".btn6").click(function() {            var size = Jc.getWidgetSize();            $("p").text("w:"+size[0]+" h:"+size[1]);        });        //查看body使用插件效果        $(".btn7").click(function() {            $("body").Jcrop();        });    </script></body></html>

0 0