layui与cropper裁剪上传图片

1、引用3以上的js版本文件 文件下载地址 提取码：2y21

<script type="text/javascript" src="cropper.js"></script>
<link rel="stylesheet" href="cropper.css">

2、引用layui相关文件 文件下载地址 提取码：mhd3

<script type="text/javascript" src="layui.js"></script>
<link rel="stylesheet" href="layui.css">

3、引用jquery.js文件

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

html

上传按钮

<div class="layui-input-block" style="display: flex;">
	<div class="layui-upload-list layui-upload-listlogo" data-role="addlogoimg"></div>
	<button type="button" class="layui-btn">上传logo</button>
	<input type="file" name="file" id="addlogobtn" accept="image/jpeg,image/png"/> 
</div>


图片裁剪框

<div class="cropperlogo" style="display: none;width: 500px;height: 400px;">
	<img id="imagelayerlogo" style="max-width: 500px;max-height: 400px;">
</div>

最初：

$(document).on('change','#addlogobtn',function(input){
	var file = input.currentTarget.files[0];  ——→ 获取上传的文件信息
	
	$(this).val('');  ——→ 裁剪可选通一张图裁剪 
	
	var imgfile = {};  ——→ 剪裁后的图片对象
	
	if (window.FileReader) {
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onloadend = function(e) {  ——→ 监听文件读取结束后事件  
			$('#imagelayerlogo').attr("src", e.target.result);
	
	
			这里请参考cropper文档
			$('#imagelayerlogo').cropper({
				aspectRatio: 16 / 9,
				viewMode:2,
				imageSmoothingQuality: 'high',
			}).cropper('replace', e.target.result);
			这里请参考cropper文档

			var indexs = layer.open({
				type: 1,
				title: '裁剪',
				content: $(cropperbox),
				area: ['auto'],
				btn: ['确定'],
				move: false,
				cancel: function() {
					$('#imagelayerlogo').attr("src",'');
				},
				yes: function() {
					var cas = $(layerimageid).cropper('getCroppedCanvas');  ——→  获取被裁剪后的canvas
					var base64url = cas.toDataURL('image/jpg',.6);  ——→   转换为base64地址形式
					此时 base64url  就是剪裁后的图片
					但又因为上传需要file文件类型 所以要将base64转为file文件
					
					imgfile = dataURLtoFile(base64url,file.name);//将base64图片转化为file文件方法
					
					
					上传到oss的代码需要自己写哦~ ~ ~
					
					
					
				}
			});

		}
	}
})

//base64转file文件格式
function dataURLtoFile(dataurl,filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr],filename,{type: mime});
}

完整版

因为我这里共有4个上传裁剪图片的 所以封装成了一个
并且 上传到oss的代码需要用自己的 这里只提供到了 获取裁剪后的file文件格式 ，其余的都可以忽略。

剪裁封装
function cropperbox(clickobj,layerimageid,showimgurl,input,flag,cropperbox){
	var file = input.currentTarget.files[0];
	clickobj.val('');
	var imgfile = {};
	if (window.FileReader) {
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onloadend = function(e) {//监听文件读取结束后事件   
			$(layerimageid).attr("src", e.target.result);
			
			$(layerimageid).cropper({
				aspectRatio: 16 / 9,
				viewMode:2,
				imageSmoothingQuality: 'low',
			}).cropper('replace', e.target.result);
			
			var indexs = layer.open({
				type: 1,
				title: '裁剪',
				content: $(cropperbox),
				area: ['auto'],
				btn: ['确定'],
				move: false,
				cancel: function() {
					$(layerimageid).attr("src",'');
				},
				yes: function() {
					if ($(layerimageid).attr("src") == null ){
						return false;
					}else{
						var cas = $(layerimageid).cropper('getCroppedCanvas');//获取被裁剪后的canvas
						var base64url = cas.toDataURL('image/jpg',.6); //转换为base64地址形式
						imgfile = dataURLtoFile(base64url,file.name);//将base64图片转化为file文件方法
						uploadsts().then(function(res) {
							common.hideLoading();
							if (res.code === 0) {
								ossUpload(imgfile, res, {
									success: function(url) {
										if(flag == 'logo'){
											$(showimgurl).html('');
											var imghtml = '<div style="position:relative;"><img width="100%" height="80px" src="'+url+'"><i class="layui-icon delicon">&#x1006;</i></div>';
											$(showimgurl).append(imghtml);
											logoImg = url;
										}else{
											var imghtml = '<div style="position:relative;margin-bottom:3px;"><img width="100%" height="100%" class="mdimg" src="'+url+'"><i class="layui-icon delicon">&#x1006;</i></div>';
											$(showimgurl).append(imghtml);
											mdImg.push(url)
										}
										$('.delicon').show();
									}
								})
							} else {
								layer.msg(res.msg)
							}
						})
						layer.close(indexs);
					}
				}
			});
		}
	}
}