cropper动态裁剪图片（极简）
Posted lfq761204
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cropper动态裁剪图片（极简）相关的知识，希望对你有一定的参考价值。
借助cropper插件可以很简单地实现客户端图片自定义裁剪，本文代码模拟的是最简单最基础的应用。
文件上传前的大小、类型限制可以参考：MVC中通过jquery实现图片预览、上传，并对文件类型、大小进行判断（极简）
裁剪后的内容如何上传至服务器，请参考：MVC中客户端向服务器端上传base64格式的图片
cropper插件下载链接（含v1.5.11版Cropper.js、Cropper.css，以及jquery.min.js）：cropper插件下载
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>cropper.js动态裁剪图片</title>
<link href="Scripts/cropper.css" rel="stylesheet" />
<script src="Scripts/cropper.js"></script>
<script src="Scripts/jquery.min.js"></script>
<script>
$(function() {
var CROPPER;
//文件上传控件onchange事件，生成原图的预览以及Cropper对象
$("#imgReader").change(function(e) {
if(!this.files.length)return; //如果未选择图片则退出函数
//释放之前的Cropper资源——否则无法重新选择图片
CropperDispose();
//定义文件读取对象，并读取文件上传控件选择的文件。
var reader=new FileReader();
reader.readAsDataURL(this.files[0]);
//文件对象的onload事件，上传文件载入后生成预览，并在预览图上生成Cropper对象
reader.onload=function(e) {
$("#cropImg").attr("src",this.result); //预览，this.result也可设置为e.target.result
//定义Cropper对象
//第一个参数一定不能写成$("#cropImg")，不要问怎么知道的，我满含泪水无语凝噎。
//第一个参数也可以写成document.getElementById("cropImg")
CROPPER=new Cropper($("#cropImg")[0],{//参数很多，可以百度
aspectRatio: 16/5, //裁剪框宽高比例
autoCropArea: 1, //初始裁剪框显示比例
});
};
});
//裁剪图片按钮click事件，获得裁剪后图片的base64值，并通过img控件显示
$("#btnCrop").click(function() {
//获取裁剪框内内容的base64值
//第一个参数设置生成文件的类型，可以查询http的content-type对照表
//第二个参数为生成图片的压缩率
let cropImg=CROPPER.getCroppedCanvas().toDataURL("image/jpeg",0.8);
$("#cropResult").attr("src",cropImg); //将base64通过img控件显示出来
});
//释放Cropper资源
function CropperDispose() {
if(CROPPER) {
CROPPER.destroy(); CROPPER=null;
}
}
});
</script>
</head>
<body>
<p><input type="file" id="imgReader" accept="image/*" /></p><!--文件上传控件-->
<div style="width:300px;">
<p><img src="" style="width:100%;" id="cropImg" /></p><!--图片预览容器-->
<p><img src="" style="width:100%;" id="cropResult" /></p><!--裁剪后的图片容器-->
</div>
<p>
<button id="btnCrop">裁剪图片</button><!--裁剪图片按钮-->
</p>
</body>
</html>
以上是关于cropper动态裁剪图片（极简）的主要内容，如果未能解决你的问题，请参考以下文章