jQuery Cropper 使用说明

先上页面完整的代码，有时间再把不相关的东西去掉：

	
		
		
		
		
		
		
		
		
		
		

		
		

	

	
		

			

				
				
编辑个人资料
				
			
		

		

			

				

					
				
			
			

				

				
点击这里修改头像
 
			
			

				
				

					

						辖区
						
					
				
				

					

						社区
						
					
				
				

					

						姓名
						
					
				
				

					

						警号
						
					
				
				

					

						手机号
						
					
				
				

					

						短号
						
					
				
				

				

					
				
				
			

		
		
		
		

			

				

					
					
				
				
请稍等...
				

			
		
		

			

				
			
			

				

					
					
					
					
					
					
					
					
				
			
		

		
		
		
		
		
		
		
		
		
		
	

按照步骤说明：

一、头部引用css

二、body底部引用各种js

注意：jq版本不能低于10

三、各种方法使用

1：裁剪图片

function cutImg() {
$("#showEdit").fadeIn();
var $image = $('#report > img');
$image.cropper({
checkImageOrigin: true,
aspectRatio: 1 / 1,
autoCropArea: 0.5
});
}

2：确认头像，展示效果

//确认照片，展示效果
function confirm() {
$("#showEdit").fadeOut();
var $image = $('#report > img');
var dataURL = $image.cropper("getCroppedCanvas");//找死了
var imgurl=dataURL.toDataURL("image/png",1.0);//这里转成base64 image，img的src可直接使用
$("#changeAvatar > img").attr("src", imgurl);
}

3：旋转

//旋转照片
function rotateimg() {
$("#readyimg").cropper('rotate', 90);
}


function rotateimgleft() {
$("#readyimg").cropper('rotate', -90);
}

ios对内存有保护，本地没法旋转，需借助EXIF，还没用到，预留位置。

另一篇博文一经说的很详细了，请移步这里。