yf_zd
/
yfwlwCut


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
	<link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
	<link rel="stylesheet" href="{% static '/lib/css/cropper.css' %}">
	<link rel="stylesheet" href="{% static '/css/sitelogo.css' %}">
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
	<script src="{% static '/lib/js/cropper.js' %}"></script>
	<style type="text/css">
		.avatar-btns button {
			height: 35px;
		}
	</style>
</head>

<body>
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#avatar-modal" style="margin: 10px;">
		修改头像
	</button>
	<div class="user_pic" style="margin: 10px;">
		<img src="" />
	</div>
	<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">

				<form class="avatar-form">
					<div class="modal-header">
						<button class="close" data-dismiss="modal" type="button">&times;</button>
						<h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
					</div>
					<div class="modal-body">
						<div class="avatar-body">
							<div class="avatar-upload">
								<input class="avatar-src" name="avatar_src" type="hidden">
								<input class="avatar-data" name="avatar_data" type="hidden">
								<label for="avatarInput" style="line-height: 35px;">图片上传</label>
								<button class="btn btn-danger" type="button" style="height: 35px;" onclick="$('input[id=avatarInput]').click();">请选择图片</button>
								<span id="avatar-name"></span>
								<input class="avatar-input hide" id="avatarInput" name="avatar_file" onchange="selectImg(this)" type="file">
							</div>
							<div class="row">
								<div class="col-md-9">
									<div class="avatar-wrapper">
										<img id="tailoringImg">
									</div>
								</div>
								<div class="col-md-3">
									<div class="avatar-preview preview-lg" id="imageHead"></div>

								</div>
							</div>
							<div class="row avatar-btns">
								<div class="col-md-4">
									<div class="btn-group">
										<button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees">
											向左旋转</button>
									</div>
									<div class="btn-group">
										<button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees">
											向右旋转</button>
									</div>
								</div>
								<div class="col-md-5" style="text-align: right;">
									<button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
										<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
										</span>
									</button>
									<button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
										<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">

										</span>
									</button>
									<button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
										<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">

										</span>
									</button>
									<button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
										<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)" aria-describedby="tooltip866214">
									</button>
								</div>
								<div class="col-md-3">
									<button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
	<script src="{% static '/lib/js/html2canvas.min.js' %}"></script>
	<script type="text/javascript">
		//做个下简易的验证  大小 格式 
		$('#avatarInput').on('change', function (e) {
			var filemaxsize = 1024 * 5;//5M
			var target = $(e.target);
			var Size = target[0].files[0].size / 1024;
			if (Size > filemaxsize) {
				alert('图片过大，请重新选择!');
				$(".avatar-wrapper").childre().remove;
				return false;
			}
			if (!this.files[0].type.match(/image.*/)) {
				alert('请选择正确的图片!')
			} else {
				var filename = document.querySelector("#avatar-name");
				var texts = document.querySelector("#avatarInput").value;
				var teststr = texts; //你这里的路径写错了
				testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
				filename.innerHTML = testend;
				console.log(filename)
			}

		});

		// 选择文件触发事件  
		function selectImg(file) {
			//文件为空，返回  
			if (!file.files || !file.files[0]) {
				return;
			}
			$(".tailoring-container").toggle();
			var reader = new FileReader();
			reader.onload = function (evt) {
				var replaceSrc = evt.target.result;
				// 更换cropper的图片  
				$('#tailoringImg').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真  
			}
			reader.readAsDataURL(file.files[0]);
		}
		// cropper图片裁剪  
		$('#tailoringImg').cropper({
			aspectRatio: 1 / 1,// 默认比例  
			preview: '.previewImg',// 预览视图  
			guides: false, // 裁剪框的虚线(九宫格)  
			autoCropArea: 0.5, // 0-1之间的数值，定义自动剪裁区域的大小，默认0.8  
			movable: false, // 是否允许移动图片  
			dragCrop: true, // 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域  
			movable: true, // 是否允许移动剪裁框  
			resizable: true, // 是否允许改变裁剪框的大小  
			zoomable: false, // 是否允许缩放图片大小  
			mouseWheelZoom: false, // 是否允许通过鼠标滚轮来缩放图片  
			touchDragZoom: true, // 是否允许通过触摸移动来缩放图片  
			rotatable: true, // 是否允许旋转图片  
			crop: function (e) {
				// 输出结果数据裁剪图像。  
			}
		});
		// 旋转  
		$(".cropper-rotate-btn").on("click", function () {
			$('#tailoringImg').cropper("rotate", 45);
		});
		// 复位  
		$(".cropper-reset-btn").on("click", function () {
			$('#tailoringImg').cropper("reset");
		});
		// 换向  
		var flagX = true;
		$(".cropper-scaleX-btn").on("click", function () {
			if (flagX) {
				$('#tailoringImg').cropper("scaleX", -1);
				flagX = false;
			} else {
				$('#tailoringImg').cropper("scaleX", 1);
				flagX = true;
			}
			flagX != flagX;
		});

		// 确定按钮点击事件  
		$("#sureCut").on("click", function () {
			if ($("#tailoringImg").attr("src") == null) {
				return false;
			} else {
				var cas = $('#tailoringImg').cropper('getCroppedCanvas');// 获取被裁剪后的canvas  
				var base64 = cas.toDataURL('image/jpeg'); // 转换为base64  

				$("#finalImg").prop("src", base64);// 显示图片  
				uploadFile(encodeURIComponent(base64))//编码后上传服务器  
				closeTailor();// 关闭裁剪框  
			}
		});

		// 关闭裁剪框  
		function closeTailor() {
			$(".tailoring-container").toggle();
		}

		//ajax请求上传  
		function uploadFile(file) {
			$.ajax({
				url: '/demo/upload.do',
				type: 'POST',
				data: "file=" + file,
				async: true,
				success: function (data) {
					console.log(data)
				}
			});
		}  
	</script>
</body>

</html>