cropper.js实现上传、裁剪、缩放图片

结构部分

<div class="cjphotouser" style="display: none;">
	<div class="userimageboxuser">
		<!--用户上传图片的显示canvas-->
		<canvas id="cvsuser" ></canvas>
	</div>
	<!--完成裁剪后保存的canvas-->
	<img src="#" alt="" class="corpperedPicImg" id="corpperedPicImg" />
	<div class="clearfix btngroup">
		 <div class="leftbtn">
		 		<span class="uploadimage"></span>
		 		<!--图片上传按钮-->
		 		<input type="file" id="picfile" class="uppicbtn"  name="picfile" onchange="changepic(this)" accept="image/*">
		 </div>
		<div class="rightbtn saveimage"></div>
	</div>	 	
</div>

js部分

//上传完成后，显示图片
function changepic(that){
    	var fileSize = that.files[0].size; 
    	var size = fileSize / 1024; 
    	var cale = DPR();
		//限制照片大小不得超过5M
    	if(size<5000){  
		//判断移动端设备，点击上传时允许拍照或从相册中选取图片
		if (getIos()) {
        			document.getElementById('picfile').removeAttribute("capture");
        			document.getElementById('qrfile').removeAttribute("capture");
   		};
		if(this.value==''){
			hasFile = false;
		}else{
			hasFile = true;
		}
			
	if(cjType=='user'){
		var readuser = new FileReader();
    	usersF = document.getElementById('picfile').files[0];
	    
    	readuser.readAsDataURL(usersF);
    				
    	readuser.onload = function(e) {
				var userImage = new Image();
				userImage.src = e.target.result;
				userImage.onload = function(){
					// 获取想要转换的 DOM 节点
					var dom1 = document.querySelector('.userimageboxuser');
					var box1 = window.getComputedStyle(dom1);
					    
					var oWidth = userImage.width/2;
					var oHeight = userImage.height/2;
					    
					// DOM 节点计算后宽高
					var width1 = parseValue(box1.width);
					var height1 = parseValue(box1.height);
					    
					// 获取像素比
					var scaleBy1 = DPR();
						
					var canvas2 = document.getElementById("cvsuser");  
					// 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
					   
					canvas2.width = width1 * scaleBy1;
					canvas2.height = height1 * scaleBy1;
					// 设定 canvas css宽高为 DOM 节点宽高
					   
					canvas2.style.width = `${width1}px`;
					canvas2.style.height = `${height1}px`;
					   
					// 获取画笔
					var context1 = canvas2.getContext('2d');
				//处理图片居中
				context1.drawImage(userImage,  canvas2.width/2-oWidth, canvas2.height/2-oHeight);
				var options = {
	       					aspectRatio: 750 / 1334, //最终生成图片的常高比
	       					viewMode:0, //0：没有限制;1:裁剪框必须在图片内移动；2：2图片 不全部铺满1；3：图片填充整个裁剪框
	       					dragMode  :'move',//拖拽模式，只能移动裁剪框
	       					responsive:true, //调整窗口大小时，重新渲染cropper
	       					cropBoxResizable:false, //调整裁剪框大小
	       					autoCropArea:1,  //自动裁剪面积大小和图片的对比
	       					center:true,
	       					cropBoxMovable :false, //是否允许移动裁剪框
	       					autoCrop:true, //初始化时，自动生成裁剪框
	       					background:true, //显示裁剪区域的背景方格
	       					modal:false,  
	       					guides:true, //显示在裁剪框上方的虚线
	       					highlight:true,
	       					zoomOnWheel:true,  //是否可以通过移动鼠标放大图像
	       					zoomOnTouch:true, //是否可以通过拖动触摸放大图像
	       					zoomable:true,//是否允许放大图像
	       					movable:true, //是否允许移动后面的图片
	       					rotatable:true, //是否允许旋转图像
	       					scalable:true,//是否允许缩放图像
	       					resizable:true,
	       					minContainerWidth:200,//容器的最小宽度
	       					minContainerHeight:100,//容器的最小高度
	       					minCropBoxWidth:100,//裁剪层的最小宽度
	       					minCropBoxHeight:50,//裁剪层的最小高度
	       					wheelZoomRatio:0.1, //鼠标移动图像时，定义缩放比例
	       				};
	       				
	       				if(cropperImg){
							cropperImg.destroy();
						}
       					cropperImg = new Cropper(canvas2, options);
       					layer.msg("请手动调整照片到合适大小和位置",{
       						time:5000
       					});
					}
    				};
    			}
		}else{
			layer.msg("照片不能大于5M",{
       			time:4000
       		});
       		that.value="";
       		return false;
		}
    };