一款优秀的Jquery图片剪裁插件Jcrop(顺便测试一下博客排版)

最新推荐文章于 2021-03-11 09:39:08 发布

weixin_33896726

最新推荐文章于 2021-03-11 09:39:08 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/justinchen/archive/2012/05/14/2499723.html

Jcorp是一款优秀的jQuery图片剪裁插件，适用于头像编辑等场景，提升用户体验。本文介绍了Jcorp的下载地址、使用方法及效果示例。

Jcorp是一款优秀的jquery图片剪裁插件，可以用于头像的编辑，增加用户体验。

插件下载地址

官方地址：http://deepliquid.com/content/Jcrop_Download.html

插件使用方法

其实官方已经提供了足够丰富的demo了：

demo1:http://deepliquid.com/projects/Jcrop/demos.php?demo=basic

demo2:http://deepliquid.com/projects/Jcrop/demos.php?demo=handler

demo3:http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail

demo4:http://deepliquid.com/projects/Jcrop/demos.php?demo=styling

demo5:http://deepliquid.com/projects/Jcrop/demos.php?demo=advanced

demo6:http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop

总结一下使用过程：

引用js和样式表

如：

    <link href="JqueryPlugin/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    <script src="Script/jquery-1.6.2.js" type="text/javascript"></script>
    <script src="JqueryPlugin/jquery.Jcrop.js" type="text/javascript"></script>

　插入待编辑图片

    <div style="border: 1px solid; width: 400px; height: 400px;">
        <img  id="jcorp" src="Images/3d_1.jpg" alt="" />
    </div>

　　绑定jcorp事件

    <script type="text/javascript">

        // Create variables (in this scope) to hold the API and image size
        var jcrop_api, boundx, boundy;

        $(function () {
            $("#jcorp").Jcrop({
                boxWidth: 400, //图片宽度
                boxHeight: 0,   //图片高度为0代表自适应
                aspectRatio: 16/9, //设置选择框高宽比,默认为任意
                minSize: [100, 100], //选择区最小尺寸
                setSelect: [0, 0, 200, 200],  //设置一个初选框的位置 n/a 
                bgColor: 'black', //设置背景容器颜色 
                bgOpacity: 0.8, //设置当图像被裁剪选框外的透明度 
                onSelect: function (c) {
                    // c.x, c.y, c.x2, c.y2, c.w, c.h

                },
                onChange: function (c) {
                    // c.x, c.y, c.x2, c.y2, c.w, c.h
                    $("#position").html(c.x + "," + c.y + "," + c.x2 + "," + c.y2 + "," + c.w + "," + c.h);
                    $("#position").css("color", "black");
                    $("#realsize").html(boundx + "," + boundy);
                },
                onDblClick: function (c) {
                    //这里的尺寸是图片缩放后的尺寸,onSelect和onChange是真实尺寸
                },
                onRelease: function (c) {
                }

            }, function () {
                // Use the API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                // Store the API in the jcrop_api variable
                jcrop_api = this;
            });
        });

    </script>

　　以上是jcorp常用的方法和参数设置，更多的请查阅插件源代码。