本篇文章需要 js，jquery 等基础
cropper 下载
cropper 是一款 js 插件，下载地址：https://github.com/fengyuanchen/cropper/blob/master/README.md
jquery 下 cropper 使用步骤
引入文件
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/cropper.js"></script><!-- Cropper.js is required -->
<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/jquery-cropper.js"></script>
在 html 中放入一个 img 标签
<div>
<img id="image" src="picture.jpg">
</div>
在 js 中对 img 标签使用 cropper 方法
$('#image').cropper({
aspectRatio: 1 / 1,
viewMode: 1
});
//aspectRatio 规定了裁剪框的比例，其他参数查看官方文档
截至目前，img标签会出现一个裁剪框，怎么获得裁剪框区域内的图像呢？以下
var cas = $('#image').cropper('getCroppedCanvas');
var dataURL = cas.toDataURL("image/jpeg");
//dataURL 是base64格式的图片
jquery 下 cropper 完整例子
另存为html，并引入相应的文件，即可运行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/css/cropper.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/cropper.min.js"></script>
</head>
<body>
<div>
<img id="image" src="test.jpg" style="max-width: 100%;">
</div>
<button id="edit">
裁剪
</button>
<button id="cancel">
取消
</button>
<button id="save">
保存
</button>
<script>
$('#edit').click(function () {
$('#image').cropper({
aspectRatio: 1,
viewMode: 1
});
});
$('#cancel').click(function () {
$('#image').cropper('destroy');
});
$('#save').click(function () {
var cas = $('#image').cropper('getCroppedCanvas');
var dataURL = cas.toDataURL("image/jpeg");
$('#image').attr("src", dataURL);
$('#image').cropper('destroy');
});
</script>
</body>
</html>
