一、使用方法：

代码：

// 载入CSS文件
<link rel="stylesheet" href="css/jquery.Jcrop.css">
// 载入JavaScript文件
<script src="js/jquery.js"></script>    
<script src="js/jquery.Jcrop.js"></script>
// 给图像标签加上ID
<img id="element_id" src="pic.jpg">
// 调用Jcrop
$("#element_id").Jcrop();

二、参数说明：

三、API说明：

代码：

var jcropApi;
$('#element_id').Jcrop
({
  allowSelect: true,
  baseClass: 'jcrop'
}, function() 
{
  jcropApi = this;
});

四、相关信息：

<dl> <dt> 作者网站： </dt> <dd> http://deepliquid.com/content/Jcrop.html </dd> </dl> <dl> <dt> 相关文档： </dt> <dd> Github </dd> <dd> 中文文档 </dd> </dl> <dl> <dt> 授权协议： </dt> <dd> MIT </dd> </dl>

附：

参考：

附：js实现上传头像并实时预览

图片预览:

简单的来说就是，就是替换img的src；而读取URL有filereader 和 URL.createObjectURL 两种预览方式。这两种方式可以获得上传图片的名字（name）

filereader 的方法：

//filereader 的方法
<form action="" enctype="multipart/form-data">
    <input id="file" class="filepath" onchange="changepic(this)" type="file"><br>
    <img src="" id="show" width="200">
</form>
<script>
    function changepic() {
        var reads= new FileReader();
        f=document.getElementById('file').files[0];
        reads.readAsDataURL(f);
        reads.onload=function (e) {
            document.getElementById('show').src=this.result;
        };
    }
</script>

使用 jQuery Jcrop 实现图像裁剪