使用 jQuery Jcrop 实现图像裁剪

一、使用方法：

代码：

// 载入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;
});

四、相关信息：

作者网站：

http://deepliquid.com/content/Jcrop.html

相关文档：

Github

中文文档

授权协议：

MIT

附：

参考：

1. Jcrop使用方法
2. 头像截取上传并预览
3. 使用jcrop进行头像剪切
4. Jcrop——Github
5. jQuery Jcrop 图像裁剪
6. CropImageWeb
7. 【前端】图片裁剪（二）Jcrop实现裁剪
8. jQuery的图像裁剪插件Jcrop的简单使用
9. jQuery Jcrop 图像裁剪
10. 使用JCrop裁剪图片
11. jcrop图片裁剪使用踩过的坑
12. 使用jcrop裁剪图片
13. 使用JCrop保存裁剪图像
14. 【Web】前端裁剪图片，并上传到服务器（Jcrop+canvas）
15. Jcrop图片裁剪插件 参数说明
16. jQuery Jcrop API参数说明(中文版)
17. 使用JCrop裁剪图片
18. Jcrop » the jQuery Image Cropping Plugin
19. Jcrop » Basic Demo
20. jQuery Jcrop 图像裁剪 CSS 样式
21. Jcrop » Manual
22. 【前端】JavaScript实现图片裁剪
23. HTML5 本地裁剪图片并上传至服务器（老梗）
24. 【开源】canvas图像裁剪、压缩、旋转
25. h5利用cropper.js实现图片裁剪
26. JavaScript实现本地图片上传前进行裁剪预览
27. 使用HTML5 canvas 标签进行图片裁剪、旋转、缩放
28. 前端纯js模仿微信头像的裁剪（图片裁剪）
29. 实现HTML5 裁剪图片并上传
30. 5款好用的开源JS图片裁剪插件(3个jQuery插件，2个AngularJS插件)

附：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>

参考：

1. input上传图片并预览
2. js实现上传头像并实时预览
3. 上传头像或单张图片并预览
4. HTML5上传图片文件（含拖拽、预览、上传、美化）
5. 仿淘宝头像上传功能（一）——前端篇。