cropper.js插件做图片上传裁剪图片大小

前端代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>上传头像</title>
<link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
text-align: center;
}
#user-photo {
width:300px;
height:300px;
margin-top: 10px;
}
#photo {
max-width:100%;
max-height:350px;
}
.img-preview-box {
text-align: center;
}
.img-preview-box > div {
display: inline-block;;
margin-right: 10px;
}

.img-preview {
overflow: hidden;
}
.img-preview-box .img-preview-lg {
width: 150px;
height: 150px;
}
.img-preview-box .img-preview-md {
width: 100px;
height: 100px;
}
.img-preview-box .img-preview-sm {
width: 50px;
height: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">打开</button><br/>
<div class="user-photo-box">
<img id="user-photo" src="">
</div>
</div>
<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-primary">
<i class="fa fa-pencil"></i>
更换头像
</h4>
</div>
<div class="modal-body">
<p class="tip-info text-center">
未选择图片
</p>
<div class="img-container hidden">
<img src="" alt="" id="photo">
</div>
<div class="img-preview-box hidden">
<hr>
<span>150*150:</span>
<div class="img-preview img-preview-lg">
</div>
<span>100*100:</span>
<div class="img-preview img-preview-md">
</div>
<span>30*30:</span>
<div class="img-preview img-preview-sm">
</div>
</div>
</div>
<div class="modal-footer">
<label class="btn btn-danger pull-left" for="photoInput">
<input type="file" class="sr-only" id="photoInput" accept="image/*">
<span>打开图片</span>
</label>
<button class="btn btn-primary disabled" disabled="true" οnclick="sendPhoto();">提交</button>
<button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
var initCropperInModal = function(img, input, modal){
var $image = img;
var $inputImage = input;
var $modal = modal;
var options = {
aspectRatio: 1, // 纵横比
viewMode: 2,
preview: '.img-preview' // 预览图的class名
};
// 模态框隐藏后需要保存的数据对象
var saveData = {};
var URL = window.URL || window.webkitURL;
var blobURL;
$modal.on('show.bs.modal',function () {
// 如果打开模态框时没有选择文件就点击“打开图片”按钮
if(!$inputImage.val()){
$inputImage.click();
}
}).on('shown.bs.modal', function () {
// 重新创建
$image.cropper( $.extend(options, {
ready: function () {
// 当剪切界面就绪后，恢复数据
if(saveData.canvasData){
$image.cropper('setCanvasData', saveData.canvasData);
$image.cropper('setCropBoxData', saveData.cropBoxData);
}
}
}));
}).on('hidden.bs.modal', function () {
// 保存相关数据
saveData.cropBoxData = $image.cropper('getCropBoxData');
saveData.canvasData = $image.cropper('getCanvasData');
// 销毁并将图片保存在img标签
$image.cropper('destroy').attr('src',blobURL);
});
if (URL) {
$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)) {

if(blobURL) {
URL.revokeObjectURL(blobURL);
}
blobURL = URL.createObjectURL(file);

// 重置cropper，将图像替换
$image.cropper('reset').cropper('replace', blobURL);

// 选择文件后，显示和隐藏相关内容
$('.img-container').removeClass('hidden');
$('.img-preview-box').removeClass('hidden');
$('#changeModal .disabled').removeAttr('disabled').removeClass('disabled');
$('#changeModal .tip-info').addClass('hidden');

} else {
window.alert('请选择一个图像文件！');
}
}
});
} else {
$inputImage.prop('disabled', true).addClass('disabled');
}
}

var sendPhoto = function(){
$('#photo').cropper('getCroppedCanvas',{
width:300,
height:300
}).toBlob(function(blob){
// 转化为blob后更改src属性，隐藏模态框
$('#user-photo').attr('src',URL.createObjectURL(blob));
$('#changeModal').modal('hide');

//向服务器发送请

var useridx = $('#useridx').val();
// 转化为blob后更改src属性，隐藏模态框
$('#user-photo').attr('src',URL.createObjectURL(blob));
$('#changeModal').modal('hide');
var cas = $('#photo').cropper('getCroppedCanvas');
var base64url = cas.toDataURL('image/jpeg'); 将图片转换成base64url 传递，后台解析保存
if (useridx != "") {
$.post("请求路径", { file: base64url }, function (res) {
if (res == "OK") {

lalert('上传成功');
} else {

alert('上传失败');
}
})
} else {

alert('主播IDX不能为空');
}

});
}

$(function(){
initCropperInModal($('#photo'),$('#photoInput'),$('#changeModal'));
});
</script>
</body>
</html>

后台代码 MVC的写法

///控制器

[HttpPost]
public ActionResult UploadImg(string file)
{

saveFilePath = "E:\\新建文件夹\\"+DateTime.Now.GetHashCode()+ ".png"; ///保存本地

这里就是将前端base64url，截取出来
string[] img_array = file.Split(',');
byte[] arr = Convert.FromBase64String(img_array[1]);
using (MemoryStream ms = new MemoryStream(arr))
{
Bitmap bmp = new Bitmap(ms);
if (img_array[0].ToLower() == "data:image/jpeg;base64")
{
bmp.Save(saveFilePath); ///最终保存路径
}
}

}

转载于:https://www.cnblogs.com/yjm8023/p/9466624.html

cropper.js插件做图片上传裁剪图片大小相关推荐

js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
解决H5 IOS手机图片上传时图片会旋转90°问题
解决H5 IOS手机图片上传时图片会旋转90°问题 Vant 官方给出的解答需要自己解决,没有处理. 解决办法主要使用了 compressorjs 插件库一.Vant UI库Uploader 组件图 ...
菜鸟的springboot项目图片上传及图片路径分析
菜鸟的springboot项目图片上传及图片路径分析说明一.图片路径分析二.实现图片上传 (1)单文件上传(非异步) (2)单文件上传(异步) 三.总结四.更新配置文件说明更新时间:202 ...
java分布式实现图片上传到图片服务器
java分布式实现图片上传到图片服务器操作步骤第一步第二步第三步第四步第五步第六步代码实现第七步 JS代码大功告成!! 操作步骤第一步在页面中的form表单里面增加一个inpu ...
java 图片服务器上传_Java实现把图片上传到图片服务器(nginx+vsftp)
前言: 在我另一篇笔记中已经记载了如何用nginx + vsftp搭建图片服务器(请参考nginx + vsftp搭建图片服务器),并且用vsftp的客户端工具filezilla测试过已经可用.但是在 ...
vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件其实这儿所说的压缩,就是图片重 ...
Java实现把图片上传到图片服务器(nginx+vsftp)
在我另一篇笔记中已经记载了如何用nginx + vsftp搭建图片服务器,并且用vsftp的客户端工具filezilla测试过已经可用.但是在开发中应该是把用户在前端页面提交的图片保存到图片服务器中, ...
通过url链接将图片上传oss图片显示不完整问题
通过url链接将图片上传oss图片显示不完整问题问题:在之前通过链接上传图片的时候,都是先获取inputStream流,然后通过available()方法获取文件大小.但是通过这种方法获取到的文件大 ...
python修改图片大小为30kb_Python的Tornado框架实现图片上传及图片大小修改
图片的上传上传图片使用了表单提交, 下面是html部分, enctype="multipart/form-data"表示不对字节进行编码,上传文件类型时需指定. input标签的 ...

cropper.js插件做图片上传裁剪图片大小

cropper.js插件做图片上传裁剪图片大小相关推荐

最新文章

热门文章