cropper固定宽高裁剪_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结构：
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');
})
代码示例：
margin-bottom: 5px;
}
#photo {
max-width: 100%;
}
.img-preview {
width: 100px;
height: 100px;
overflow: hidden;
}
button {
margin-top:10px;
}
#result {
width: 150px;
height: 150px;
}
选择图片
预览(100*100)：
裁剪图片
结果：
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'));
});
后台代码：
///
/// 上传裁剪图片(头像)
///
///
///
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}");
}