JQuery Jcrop 实现图片裁剪的插件

169 阅读 0 评论 112 点赞

我是靠谱客的博主优美银耳汤，最近开发中收集的这篇文章主要介绍JQuery Jcrop 实现图片裁剪的插件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果如下图

请“运行代码”先试下运行，运行后请刷新一次，感受下：

<html> 
    <head> 
         
         
<style type="text/css"> 
        body{ 
            margin:100px auto; 
            text-align:center; 
        } 
        .jcrop-holder { 
            text-align: left; 
        } 
        .jcrop-vline, .jcrop-hline{ 
            font-size: 0; 
            position: absolute; 
            background: white url('http://img.uoften.com/jslib/images/Jcrop.gif') top left repeat; 
        } 
        .jcrop-vline { 
            height: 100%; 
            width: 1px !important; 
        } 
        .jcrop-hline { 
            width: 100%; 
            height: 1px !important; 
        } 
        .jcrop-handle { 
            font-size: 1px; 
            width: 7px !important; 
            height: 7px !important; 
            border: 1px #eee solid; 
            background-color: #333; 
            *width: 9px; 
            *height: 9px; 
        } 
         
        .jcrop-tracker { 
            width: 100%; 
            height: 100%; 
        } 
         
        .custom .jcrop-vline,.custom .jcrop-hline{ 
            background: yellow; 
        } 
        .custom .jcrop-handle{ 
            border-color: black; 
            background-color: #C7BB00; 
            -moz-border-radius: 3px; 
            -webkit-border-radius: 3px; 
        } 
        </style> 
         
    </head> 
    <body> 
            <img src="//images.kaopuke.com/file_images/201804/flowers.jpg" id="cropbox" />
 
脚本之家 
    </body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

目前做的这个项目中要用到用户头像功能，领导说最好是做成用户上传一个图片后可以用图像裁剪的方法自己选择头像。同事推荐了Jcrop这个插件，到它的官方站点http://deepliquid.com/content/Jcrop.html 如果网速太慢，请直接点击这里下载。下载了最新版的压缩包，压缩包中包括了Jcrop的几个demo文件，关键的Jcrop.js文件和jQuery.Jcrop.css文件。基本上来说参照它的几个demo文件就可以学会使用这个插件了。晚上正好学习研究了下，现简单总结如下，也方便下英文不好的朋友们。
使用插件必须条件：引入jQuery.js文件，引入jQuery.Jcrop.js文件，引入JQuery.Jcrop.css文件。
1.最基本使用方法
html代码部分：

复制代码代码如下:

js部分：

复制代码代码如下:

$( 
function() 
{ 
$("#demoImage").Jcrop(); 
} 
); 

这样就可以在图片上进行裁剪了。
2.得到选中区域的坐标以及回调函数
html代码部分如下：

复制代码代码如下:

<img src="demo_files/flowers.jpg" id="demoImage" /> 
<label>x1</label><input type="text" id="txtX1" /> 
<label>y1</label><input type="text" id="txtY1" /> 
<label>x2</label><input type="text" id="txtX2" /> 
<label>y2</label><input type="text" id="txtY2" /> 
<label>width</label><input type="text" id="txtWidth" /> 
<label>height</label><input type="text" id="txtHeight" /> 

js代码部分如下：

复制代码代码如下:

$(function(){ 
//事件处理 
$("#demoImage").Jcrop({ 
onChange:showCoords, //当选择区域变化的时候，执行对应的回调函数 
onSelect:showCoords //当选中区域的时候，执行对应的回调函数 
}); 
}); 
function showCoords(c) { 
$("#txtX1").val(c.x); //得到选中区域左上角横坐标 
$("#txtY1").val(c.y); //得到选中区域左上角纵坐标 
$("#txtX2").val(c.x2); //得到选中区域右下角横坐标 
$("#txtY2").val(c.y2); //得到选中区域右下角纵坐标 
$("#txtWidth").val(c.w); //得到选中区域的宽度 
$("#txtHeight").val(c.h); //得到选中区域的高度 
}

3.常用选项设置

复制代码代码如下:

aspectRatio:选中区域按宽/高比，为1表示正方形。 
minSize:最小的宽，高值。 
maxSize:最大的宽，高值。 
setSelect:设置初始选中区域。 
bgColor:背景颜色 
bgOpacity:背景透明度。 
allowResize:是否允许改变选中区域大小。 
allowMove:是否允许移动选中区域。

举例如下：

复制代码代码如下:

$(function() { 
$("#demoImage").Jcrop({ 
aspectRatio: 1, //选中区域宽高比为1，即选中区域为正方形 
bgColor:"#ccc", //裁剪时背景颜色设为灰色 
bgOpacity:0.1, //透明度设为0.1 
allowResize:false, //不允许改变选中区域的大小 
setSelect:[0,0,100,100] //初始化选中区域 
}); 
});

4.api用法

复制代码代码如下:

var api = $.Jcrop("#demoImage"); 
api.disable(); //设置为禁用裁剪效果 
api.enable(); //设置为启用裁剪效果 
api.setOptions({allowResize:false});//设置相应配置 
api.setSelect([0,0,100,100]); //设置选中区域 

下载地址:http://www.uoften.com/jiaoben/24768.html