yf_zd
/
yfwlwCut


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

<head>
	<meta charset="UTF-8">
	<title>基于cropper.js的图片裁剪</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="{% static '/lib/css/cropper.css' %}">
	<link rel="stylesheet" href="{% static '/css/ImgCropping.css' %}">
	<style>
		.baseedit>div {
			margin-top: 20px;
		}

		.titleTxt {
			color: #626262;
			display: inline-block;
			width: 200px;
			text-align: right;
			vertical-align: top;
		}

		.baseContent {
			display: inline-block;
		}

		#baseName {
			border-radius: 0!important;
			color: #858585;
			background-color: #FFF;
			border: 1px solid #D5D5D5;
			padding: 5px 4px 6px;
			font-size: 14px;
			font-family: inherit;
			width: 220px;
		}

		#finalImg {
			width: 100%;
		}

		.cancel {
			background: #ABBAC3;
			color: #fff;
			border: solid 1px #ABBAC3;
		}

		.cancel:hover {
			background: #d4d9db;
			color: #fff;
			border: solid 1px #d4d9db;
		}

		#hint {
			display: none;
			position: fixed;
			left: 50%;
			top: 50%;
			background: #b2b2b2;
			padding: 20px;
			border-radius: 5px;
			color: #fff;
			transform: translateX(-50%) translateY(-50%);
		}
	</style>
</head>

<body>
	<div class="baseedit">
		<div>
			<label class="titleTxt">基地名称：</label>
			<div class="baseContent">
				<input id="baseName" type="text" value="{{base_name|default_if_none:" "}}">
			</div>
		</div>
		<div>
			<label class="titleTxt">基地图片：</label>
			<div class="baseContent">
				<button id="replaceImg" class="l-btn">更换图片</button>
				<div style="padding: 5px;margin-top: 10px;width: 230px;height: 165px;border: 1px solid #D5D5D5;">
					<img id="finalImg" src="{{base_photo}}">
				</div>
			</div>
		</div>
		<div>
			<label class="titleTxt">　</label>
			<div class="baseContent">
				<button id="replaceImg" class="l-btn" onclick="savemsg()">保存</button>
				<button id="replaceImg" class="l-btn cancel"  onclick="cancel()">取消</button>
			</div>
		</div>
	</div>


	<div style="display: none" class="tailoring-container">
		<div class="black-cloth" onclick="closeTailor(this)"></div>
		<div class="tailoring-content">
			<div class="tailoring-content-one">
				<label title="上传图片" for="chooseImg" class="l-btn choose-btn">
					<input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)"> 选择图片
				</label>
				<div class="close-tailoring" onclick="closeTailor(this)">×</div>
			</div>
			<div class="tailoring-content-two">
				<div class="tailoring-box-parcel">
					<img id="tailoringImg">
				</div>
				<div class="preview-box-parcel">
					<p>图片预览：</p>
					<div class="square previewImg"></div>
					<!-- <div class="circular previewImg"></div> -->
				</div>
			</div>
			<div class="tailoring-content-three">
				<button class="l-btn cropper-reset-btn">复位</button>
				<button class="l-btn cropper-rotate-btn">旋转</button>
				<button class="l-btn cropper-scaleX-btn">换向</button>
				<button class="l-btn sureCut" id="sureCut">确定</button>
			</div>
		</div>
	</div>
	<div id="hint"></div>

	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="{% static '/lib/js/cropper.js' %}" type="text/javascript" charset="utf-8"></script>
	<script>
		var oldfinalImg = $('#finalImg').attr('src');		
		var oldbaseName = $('#baseName').val();

		//弹出框水平垂直居中
		(window.onresize = function () {
			var win_height = $(window).height();
			var win_width = $(window).width();
			if (win_width <= 768) {
				$(".tailoring-content").css({
					"top": (win_height - $(".tailoring-content").outerHeight()) / 2,
					"left": 0
				});
			} else {
				$(".tailoring-content").css({
					"top": (win_height - $(".tailoring-content").outerHeight()) / 2,
					"left": (win_width - $(".tailoring-content").outerWidth()) / 2
				});
			}
		})();

		//弹出图片裁剪框
		$("#replaceImg").on("click", function () {
			$(".tailoring-container").toggle();
		});
		//图像上传
		function selectImg(file) {
			if (!file.files || !file.files[0]) {
				return;
			}
			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: 1221 / 874,//默认比例
			viewMode: 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 base64url = cas.toDataURL('image/png'); //转换为base64地址形式
				$("#finalImg").prop("src", base64url);//显示为图片的形式

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

		function savemsg() {
			var baseName = $('#baseName').val();
			var finalImg = $('#finalImg').attr('src');

			if((finalImg == oldfinalImg) && (baseName == oldbaseName)){
				$('#hint').html('暂未更改');
				$('#hint').show();
				$('#hint').fadeOut(2000);
				return false;
			}
			if (baseName == '') {
				$('#hint').html('请填写基地名称');
				$('#hint').show();
				$('#hint').fadeOut(2000);
				return false;
			}
			if((finalImg == oldfinalImg) && (baseName != oldbaseName)){
				var formFile = new FormData();
				formFile.append("basename", baseName);
			}
			if(finalImg != oldfinalImg){
				var fileObj = dataURLtoFile(finalImg, 'filename')
				var formFile = new FormData();
				formFile.append("basephoto", fileObj);
				formFile.append("basename", baseName);
			}	
			var data = formFile;
			
			$.ajax({
				url: "user_base_save",
				data: data,
				type: "Post",
				dataType: "json",
				cache: false,//上传文件无需缓存
				processData: false,//用于对data参数进行序列化处理 这里必须false
				contentType: false, //必须
				success: function (result) {
					$('#hint').html('更换成功');
					$('#hint').show();
					$('#hint').fadeOut(2000)
				},
			})
		}
		function dataURLtoFile(dataurl, filename) {
			var arr = dataurl.split(',');
			var mime = arr[0].match(/:(.*?);/)[1];
			var bstr = atob(arr[1]);
			var n = bstr.length;
			var u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			//转换成file对象
			return new File([u8arr], filename, { type: mime });
			//转换成成blob对象
			//return new Blob([u8arr],{type:mime});
		}
		
		function cancel(){
			$('#baseName').val(oldbaseName);
			$('#finalImg').attr('src',oldfinalImg);
		}
	</script>
</body>

</html>