copper.js+jq H5图片剪裁

 

压缩资源包 https://download.csdn.net/download/weixin_40828023/12109489

git copper 文档

下面是本次开发实现方式,以及知识点和bug总结

之前下载的小伙伴,不好意思了,发错资源了,现在是对的资源,有疑问可留言一起探讨

dom

<!-- 示例图片弹窗 -->
		<div class="m_master"></div>
		<!--Logo裁剪上传-->
		<div class="cutLogoPicturePop">
			<div class="copperMainBox"><img src="" alt="" id="image"></div>
			<div class="img-preview-box"><div class="img-preview" style=""><img src="" /></div></div>
			<!--选择后的图片进行上传 操作-->
		    <form id="form_logo_photo" action="{/get_url rule='/company/UploadImageNew'/}" method="post" enctype="multipart/form-data">
		        <input type="file" name="imageFile" id="chooseLogoImg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"  value="" style="display: none;" />
		    </form>
			<div class="btn-group"><span class="cropper_closeBtn">取消</span><span class="cropper_sureBtn">确认</span></div>
			<input type="hidden" name="" id="cropX" value="" />
			<input type="hidden" name="" id="cropY" value="" />
			<input type="hidden" name="" id="cropH" value="" />
			<input type="hidden" name="" id="cropW" value="" />
			<input type="hidden" name="" id="thumb_ratio" value="" />
		</div>
		<!--展示logo 以及点击选择图片-->
		<div class="compnayLogoTit">
			<span id="chooseLogoBtn" class="head-img">企业logo</span>
		</div>
		<div class="companyLogoImg" id="photo_upload_btn" class="">
			<img id="photo_tx_url" class="head-img " src="./img/image.png">
		</div>

JS部分

<script type="text/javascript">
			//实现方式
			// 当前图片剪裁方式主要是,
			// 选择图片后,进行上传,上传成功后,开始生成剪裁弹窗,然后取出剪裁参数,上传到后台,和后台配合完成剪裁.
			//因为后台原有剪裁方法,所以前端只上传了剪裁参数,
			
			//知识点 
			//1. cropper['getCroppedCanvas']({ maxWidth: 160, maxHeight: 160 }) 生成一张剪裁后图片 canvas 节点
			
			//2. jq change 当重复选择同一张图片时,是不会重复执行该change事件, 需要将input file 的val('')清空
			
			//3.重置图片 重新选择图片
			 // cropper.reset().replace(chooseImgUrl);
			
			//4.固定定剪裁框的宽高
				//minCropBoxHeight:160,
				//minCropBoxWidth:160,
				//cropBoxResizable:false,是否允许拖拽改变 剪裁框大小	
			
			//5.预览图
				//preview: '.img-preview',
				//最优结构 <div class="img-preview-box"><div class="img-preview" style=""><img src="" /></div></div>
				//.img-preview{overflow:hidden}

			//5.生成剪裁图片
			// 如果纯前端剪裁 cropper['getCroppedCanvas']({ maxWidth: 160, maxHeight: 160 }) 生成一张剪裁后图片 canvas 节点
			
			//前端上传剪裁后图片 思路
			// 根据这个生成canvas 然后再转base64 或者 二进制流上传
			
			//注意: 选择图片在IOS 中,会出现倒图,但是本次方案,经过IOS测试并未出现. 如果出现,就需要前端和后端一起旋转图片
			
			var cropper=null;
			var JSON_ImgInfoObj={};
			$('#photo_upload_btn').click(function(){
				$('#chooseLogoImg').click();
			})
			$('#chooseLogoImg').change(function(){
				var chooseImgUrl = URL.createObjectURL($(this)[0].files[0])
				$('#image').attr('src', chooseImgUrl);
			    // $('#form_logo_photo').ajaxSubmit({beforeSubmit: function(){showLoading()},data:{},success: function(res){
					// if(res.status){
						// JSON_ImgInfoObj=res;
			            if(!cropper){
			                cropper = new Cropper(image, {
			                    aspectRatio: 1 / 1,
			                    viewMode:1,
			                    autoCropArea: 0.4,//定义初始化裁剪框对比图片的比例大小,默认为0.8
			                    minContainerWidth:160,//容器的最小宽度。
			                    minContainerHeight:160,//容器的最小高度。
								minCanvasWidth:160,//canvas的最小宽度。
								minCanvasHeight:160,//canvas的最小高度。
			                    touchDragZoom:true,
								cropBoxResizable:false,//是否允许拖拽改变 剪裁框大小
			                    minCropBoxHeight:160,
			                    minCropBoxWidth:160,
			                    preview: '.img-preview',
			                    crop:function (e) {
			                         $('#cropX').val(e.detail.x),
			                         $('#cropY').val(e.detail.y),
			                         $('#cropH').val(e.detail.height),
			                         $('#cropW').val(e.detail.width),
			                         $('#thumb_ratio').val(e.detail.rotate)
			                    }
			                });
			            }else{
			                cropper.reset().replace(chooseImgUrl);
			            }
						// stopLoading();
			            $('.m_master, .cutLogoPicturePop').show();
					// }
			    // },dataType:'json'});
				
			})
			$('.cropper_closeBtn').click(function(){
				$('.m_master, .cutLogoPicturePop').hide();
				$('#chooseLogoImg').val(''); //清空input file val值   选择相同图片 change的bug,
			})
			$('.cropper_sureBtn').click(function(){
				$('#chooseLogoImg').val('');
				
				$('#photo_tx_url').hide();
				$('.companyLogoImg').append(cropper['getCroppedCanvas']({ maxWidth: 160, maxHeight: 160 }))
				$('.m_master, .cutLogoPicturePop').hide();
			   //上传剪裁参数
				// var $cropX = $('#cropX').val(),$cropY = $('#cropY').val(),$cropH = $('#cropH').val(),$cropW = $('#cropW').val(),$thumb_ratio = $('#thumb_ratio').val();
			 //    $.ajax({
			 //        type: 'post',
			 //        url: 'SaveLogoUpload',
			 //        data: {
			 //            cropX: $cropX,
			 //            cropY: $cropY,
			 //            cropH: $cropH,
			 //            cropW: $cropW,
			 //            cropPH: '',
			 //            cropPW: '',
			 //            url:JSON_ImgInfoObj['path'],
			 //            name: JSON_ImgInfoObj['name'],
			 //            thumb_type: JSON_ImgInfoObj['thumb_type'],
			 //            thumb_ratio: JSON_ImgInfoObj['thumb_ratio']
			 //        },
			 //        dataType: 'json',
			 //        success: function(res){
			 //            if(res.state){
			 //                alert('上传成功');
				// 			$('#photo_tx_url').attr('src',res.image_url);
			 //            }else{
				// 			alert(res.msg);
			 //                return false;
			 //            }
			 //        }
			 //    });
			})
		</script>