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

最新推荐文章于 2020-09-20 15:29:06 发布

原创最新推荐文章于 2020-09-20 15:29:06 发布 · 891 阅读

0 ·

CC 4.0 BY-SA版权

jQuery插件专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了Jcrop图像裁剪插件的使用方法，包括具体使用原理、兼容性、版本选择等，并提供了示例代码演示如何在网页中实现图像的动态裁剪。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请在这里查看示例 ☞ 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>