cropper实现基本的裁剪图片并上传
使用cropper之前需要先引用 cropper.css 和 cropper.js
cropper 官网：https://fengyuanchen.github.io/cropper/
cropper.css下载：https://github.com/fengyuanchen/cropperjs/tree/master/docs/css
cropper.js下载：https://github.com/fengyuanchen/cropperjs/tree/master/docs/js
然后我们来了解一下cropper的基本属性及方法
参数options
1. viewMode(定义cropper的视图模式)
类型:number；默认：0；可以使用0,1,2,3；
0：没有限制，3可以移动到2外。
1 : 3只能在2内移动。
2：2图片 不全部铺满1 （即缩小时可以有一边出现空隙）
3：2图片填充整个1
2. dragMode (定义cropper的拖拽模式)
类型: String
默认: ‘crop’
选项:
‘crop’: 可以产生一个新的裁剪框3
‘move’: 只可以移动3
‘none’: 什么也不处理
3. aspectRatio—-裁剪框的宽高比
类型:number；默认：NAN；
在默认的时候。可以随意改变裁剪框的大小；我这里的设置的值为 16/9;
4. data—如果您已经存储了以前的数据，那么在构建时将会自动将其传递给setData方法。(具体怎么用还不知道)
5. preview—-添加额外的元素(容器)以供预览
类型：Element / String 默认：“ ”；
注意这里是一个dom元素。必须可以被Document.querySelectorAll获取到；
preview:".small",
HTML结构：<div class="small"></div>；注意一定要设置small的宽高；最好和裁剪比例一致；还有如果要想正确的显示出裁剪的区域需要加上样式overflow: hidden;
6. center—裁剪框在图片正中心。
7. background–显示容器的网格背景。（就是后面的马赛克）
8. rotatable–是否允许旋转图像。
9. scalable–是否允许缩放图像。
10. zoomable–是否允许放大图像。
11. ready—插件准备完成执行的函数（只执行一次）。
12. crop—剪裁框发生变化执行的函数。
13. zoom—剪裁框缩放的时候执行的函数。
Methods 方法
使用方法示例：
$().cropper({
ready: function () {
$().cropper('method', argument1, , argument2, ..., argumentN);
}
});
1. crop 手动显示裁剪框
$("#image").cropper({
autoCrop: false, //关闭自动显示裁剪框
ready: function () {
$(this).cropper('crop');
}
});
2 . reset—-将图像和裁剪框重置为初始状态
$("#reset").on("click", function () {
$('#image').cropper('reset');
})
3 . clear—清除裁切框
$("#clear").on("click", function () {
$('#image').cropper('clear');
})
4. replace(url[, onlyColorChanged])—替换图像的src并重新构建cropper
$("#replace").on("click", function () {
$('#image').cropper('replace',"./images/111.jpeg",true );
})
5. enable()—解锁，锁定的裁切框（与disable相对应）
$("#enable").on("click", function () {
$('#image').cropper('enable');
})
6 . disable()—锁定的裁切框（裁切框不可移动）（与enable相对应） $("#disable").on("click", function () {
$('#image').cropper('disable');
})
7.destroy()—销毁cropper并从图像中删除整个cropper。
$("#destroy").on("click", function () {
$('#image').cropper('destroy');
})
代码示例： <style>
.row{
margin-bottom: 5px;
}
#photo {
max-width: 100%;
}
.img-preview {
width: 100px;
height: 100px;
overflow: hidden;
}
button {
margin-top:10px;
}
#result {
width: 150px;
height: 150px;
}
</style>
<div class="row">
<div class="col-sm-12 text-center">
<label for="input" class="btn btn-danger" id="">
<span>选择图片</span>
<input type="file" id="input" class="sr-only">
</label>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-2">
<img src="" id="photo">
</div>
<div class="col-sm-2">
<div>
<p>
预览(100*100)：
</p>
<div class="img-preview">
</div>
</div>
<button class="btn btn-primary" onclick="crop()">裁剪图片</button>
<div>
<br/>
<p>
结果：
</p>
<img src="" alt="裁剪结果" id="result">
</div>
</div>
</div> <script>
// 修改自官方demo的js
var initCropper = function (img, input){
var $image = img;
var options = {
aspectRatio: 1, // 纵横比
viewMode: 2,
preview: '.img-preview' // 预览图的class名
};
$image.cropper(options);
var $inputImage = input;
var uploadedImageURL;
if (URL) {
// 给input添加监听
$inputImage.change(function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
// 判断是否是图像文件
if (/^image\/\w+$/.test(file.type)) {
// 如果URL已存在就先释放
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
}
uploadedImageURL = URL.createObjectURL(file);
// 销毁cropper后更改src属性再重新创建cropper
$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
$inputImage.val('');
} else {
window.alert('请选择一个图像文件！');
}
}
});
} else {
$inputImage.prop('disabled', true).addClass('disabled');
}
}
var crop = function () {
var photo = $('#photo').cropper('getCroppedCanvas', {
// 裁剪后的长宽
height: 160
}).toDataURL('image/png');
console.log(photo);
$.ajax({
url: '/Attachment/Uploadphoto', // 要上传的地址
method: 'post',
data: { dataURL:photo },
success: function (data) {
$('#result').attr('src', data).show();
$('#img').val(data);
},
error: function (data) {
alert(data);
}
});
}
$(function(){
initCropper($('#photo'),$('#input'));
});
</script>后台代码：
/// <summary>
/// 上传裁剪图片(头像)
/// </summary>
/// <param name="dataURL"></param>
/// <returns></returns>
public ActionResult Uploadphoto(string dataURL)
{
//将‘，’以前的多余字符串去除
string base64 = dataURL.Substring(dataURL.IndexOf(",") + 1);
byte[] bytearr = Convert.FromBase64String(base64);
MemoryStream ms = new MemoryStream(bytearr);
//将MemoryStream对象转换成Bitmap对象
Bitmap bmp = new Bitmap(ms);
//关闭流
ms.Close();
string dir = DateTime.Now.ToString("yyyyMMdd");
string abpath = Server.MapPath($"/upload/{dir}/");
if (!Directory.Exists(abpath))
{
Directory.CreateDirectory(abpath);
}
string newname = Guid.NewGuid().ToString().Substring(0, 6) + ".png";
bmp.Save(abpath + newname, System.Drawing.Imaging.ImageFormat.Png);
return Content($"/upload/{dir}/{newname}");
}
