input剪裁图片后，base64图片上传

效果示意：

前端框架使用了bootstrap4.0
剪裁插件：cropper.js

HTML

					<div class="input-group mb-3 form-group file-img">
					  <div class="custom-file">
					  	<input type="text" style="display: none" name="company_img">
					    <input type="file" name="company_img_file" class="custom-file-input" id="inputGroupFile04" placeholder="上传公司LOGO">
					    <label class="custom-file-label uploadfile" for="inputGroupFile04">上传公司LOGO</label>
					  </div>
					  <div class="input-group-append">
					    <button class="btn btn-outline-secondary" type="button" data-toggle="modal" data-target=".bd-example-modal-lg">预览</button>
					  </div>
					</div>

剪裁窗口与图片预览窗口

<div class="modal-box">
		<div class="modal-bd"></div>
		<div class="row">
			<div class="modal--content col-sm-12 col-md-8 col-lg-6 col-xl-4">
					<div class="text-center">
						<img style="max-width: 100%;" src="/uploads/image/20190531/14240239067.jpeg" id="IMGshow">
					</div>
			</div>
		</div>
	</div>
	<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	  <div class="modal-dialog modal-lg modal-dialog-centered">
	      <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" style="text-align: center;">
	      	<img  style="max-width: 100%;margin: 0 auto" src="https://blogs.4apn.cn/uploads/18027046690/20190530/9ac8b032886c97e28744bba73e77bebd.gif" id="IMAGE">
	      </div>
	  </div>
	</div>

CSS

/*弹出窗口*/
.modal-box{
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	transition: 0.4s;
	overflow: hidden;
	overflow-y: scroll;
	background-color:rgba(255,255,255,1);
	padding: 15px;
	opacity: 0;
}
.modal-box .modal-bd{
	background-color:rgba(255,255,255,1);
	position: absolute;
	width: 100%;
	height:100%;
	left: 0;
	top: 0
}
.modal-box .modal--content{
	margin: 0 auto;
	height: auto;
}

.modal-box .modal--content img{
	max-width: 100%;
	text-align:center;
}
.btn-cropend{
	position: absolute;
	right: 0;
	bottom: -1px
}
.btn-hidden{
	display:none;
	opacity: 0;
}
.btn-show{
	display:block;
	

剪裁插件初始化JS

var image = $('#IMGshow');
image.cropper({
	aspectRatio:1,
	minWidth: 200,
	minHeight: 200,
	maxWidth: 2000,
	maxHeight: 2000,
	fillColor: '#fff',
	imageSmoothingEnabled: true,
	imageSmoothingQuality: 'high',
	minCropBoxWidth:200,
	minCropBoxHeight:200,
	fixedNumber:[1,1,],
    fixed:true,
    autoCrop: true,
	crop: function(event) {

	},
    ready:function () {
       $(".cropper-crop-box").append('<button class="btn btn-primary btn-cropend btn-hidden" id="cropendImg"  type="submit" style="padding: 0.5rem 1rem;" >完成剪裁</button>')
       $("#cropendImg").click(function(){
       		var cas=$('#IMGshow').cropper('getCroppedCanvas');
        	var base64url=cas.toDataURL('image/jpeg');
        	$.ajax({
			    type:"post",
	          	url:'/recruitUpload',
	          	data:{company_img_file:base64url},
			    success:function(res){
			    	if(res.code == 0){
			    		alert_msg('success',res.msg,4000)
			    		$("input[name='company_img']").val(res.url);
			    		$("#IMAGE").attr("src",res.url)
						setTimeout(()=>{
							$(".modal-bd").click();
						},1000)
			    	}else{
			    		alert_msg('danger',res.msg,4000)
			    	}
			    },
			    error:function(){
			      alert_msg('danger','网络错误',4000)
			    }
		  })
		})
    },
    cropstart: function (e) {
        $("#cropendImg").addClass("btn-hidden").removeClass("btn-show")
    },
    cropmove: function (e) {
        $("#cropendImg").addClass("btn-hidden").removeClass("btn-show")
    },
    cropend: function (e) {
        $("#cropendImg").addClass("btn-show").removeClass("btn-hidden")
    },
    crop: function (e) {
         $("#cropendImg").addClass("btn-hidden").removeClass("btn-show")
    },
    zoom: function (e) {
         $("#cropendImg").addClass("btn-hidden").removeClass("btn-show")
    },
});

图片上传input change事件

$("input[name='company_img_file']").change(function(){
	if($("input[name='company_img_file']")["0"].files.length > 0){
		var reader = new FileReader();
		reader.onload = function(e) {
			$(".modal-box img").attr('src',e.target.result)
			$('#IMGshow').cropper('replace',e.target.result,false);
			setTimeout(()=>{
				$(".modal-box").css({'z-index':'200',top:'-100%',})
			},200)
			setTimeout(()=>{
				$(".modal-box").css({opacity:1,top:0})
			},800)
			alert_msg('primary','点击空白处即可放弃剪裁',4000)
		}
		console.log($("input[name='company_img_file']"))
		reader.readAsDataURL($("input[name='company_img_file']")["0"].files["0"])
		$(".uploadfile").text($("input[name='company_img_file']")["0"].files["0"].name)
	}else{
		$(".uploadfile").text("上传公司LOGO")
	}
	
})

剪裁弹窗关闭事件JS

$(".modal-bd").click(function(){
		$(".modal-box").css({opacity:0.1,top:'-100%'})
		setTimeout(()=>{
			$(".modal-box").css({opacity:0})
		},500)
		setTimeout(()=>{
			$(".modal-box").css({'z-index':'-1',top:0})
		},1000)
	})

tp后端保存base64图片，并返回url地址
查看文章：https://blog.csdn.net/qq_42289686/article/details/90477902