yf_zd
/
yfwlwCut


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
							{% 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 href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
	<link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
	<link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
	<link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
	<link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
	<link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
	<link rel="stylesheet" href="{% static '/lib/css/cropper.css' %}">
	<link rel="stylesheet" href="{% static '/css/ImgCropping.css' %}">
	<style>
		body {
			overflow: hidden;
			background: #fff;
		}

		.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%);
		}

		/* 图片列表 */

		.refresh {
			font-size: 16px;
			color: #4C8FBD;
			margin-right: 30px;
		}
		.bannerList >div{
			margin-bottom: 20px;
		}

		.showimg {
			position: relative;
			width: 100%;
			height: 280px;
			background: #eee;
			border-radius: 8px;
			overflow: hidden;

		}

		.showimg:hover .bottomDiv {
			height: 32px;
		}

		.showimg>img {
			width: 100%;
			height: 100%;
		}

		.bottomDiv {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 0;
			background: rgba(0, 0, 0, 0.57);
			text-align: right;
			padding-right: 20px;
			transition: all .3s linear;
			-moz-transition: all .3s linear;
			/* Firefox 4 */
			-webkit-transition: all .3s linear;
			/* Safari and Chrome */
			-o-transition: all .3s linear;
			/* Opera */
		}

		.bottomDiv>a {
			color: #fff;
			line-height: 32px;
		}
		 /* 空数据 */

        .vrnull {
            text-align: center;
            padding-top: 12%;
            line-height: 30px;
        }
	</style>
</head>

<body>
	<div class="content">
		<div class="page-header">
			<h1>
				<font style="vertical-align: inherit;">
					<font style="vertical-align: inherit;">
						轮播图管理
					</font>
				</font>
				<!-- <a class="refresh" href="javascript:;" style="float: right;">
					<i class="add">
						<img src="{% static '/img/addicon.png' %}" alt="" width="28">
					</i>添加轮播图 </a> -->
					{% if app_img|length < 8 %}
					<button id="replaceImg" class="l-btn" style="float: right;">添加轮播图</button>
					{% else %}{% endif %}
			</h1>
		</div>
		<div class="row bannerList">
			{% if app_img|length  %}
			{% for i in app_img %}
			<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
				<div class="showimg">
					<img src="{{i.img}}" alt="">
					<div class="bottomDiv">
						<a href="javascipt:;" onclick="del('{{i.id}}')"><i class="fa fa-trash" aria-hidden="true"></i> 删除</a>
					</div>
				</div>
			</div>
			{% endfor %}
			{% else %}
			<div class="vrnull">
				<div><img src="../static/img/vrnull.png" alt=""></div>
				<div>暂无数据</div>
			</div>	
			{% endif %}
		</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="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script> -->
	<script src="{% static '/lib/layui/layui.all.js' %}"></script>
	<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>
		//弹出框水平垂直居中
		(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: 75 / 37,//默认比例
			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);//显示为图片的形式
				savemsg(base64url)
				//关闭裁剪框
				closeTailor();
			}
		});
		//关闭裁剪框
		function closeTailor() {
			$(".tailoring-container").toggle();
		}

		function savemsg(base64url) {
			var fileObj = dataURLtoFile(base64url, 'filename')
			var formFile = new FormData();
			formFile.append("photo", fileObj);
			var data = formFile;

			$.ajax({
				url: "app_img_upload",
				data: data,
				type: "Post",
				dataType: "json",
				cache: false,//上传文件无需缓存
				processData: false,//用于对data参数进行序列化处理 这里必须false
				contentType: false, //必须
				success: function (result) {
					$('#hint').html('保存成功');
					$('#hint').show();
					$('#hint').fadeOut(2000)
					location.reload();
				},
			})
		}
		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 del(id) {
            layer.confirm('您确定要删除此轮播图？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    url: 'app_img_delete',
                    type: 'post',
                    data: {
                        id: id
                    },
                    success: function (data) {
                        if (data == 1) {
                            layer.closeAll();
                            location.reload();
                        } else {
                            layer.msg('删除失败！', { icon: 2 });
                        }
                    },
                    error: function (type) {
                        layer.msg('删除失败！', { icon: 2 });
                    }
                })
            }, function () {

            });

        }
	</script>
</body>

</html>