Главная Обзор Помощь
Регистрация Вход
yf_zd
/
second
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

Merge branch 'master' of http://39.104.94.153:3000/yf_zd/second

yf_ymm 5 лет назад
Родитель
f8ff0e132b 6af2d0d8a4
Сommit
3fe4203b4c
7 измененных файлов с 996 добавлено и 4 удалено
Единый вид Показать статистику Diff
  1. 2 2
      templates/backstageNet/production/cropcount.html
  2. 686 0
      templates/backstageNet/systemSet/imageUpload.html
  3. 1 1
      templates/outerNet/tourist.html
  4. 1 1
      templates/outerNet/touristList.html
  5. 286 0
      templates/static/css/ImgCropping.css
  6. 10 0
      templates/static/css/cropper.min.css
  7. 10 0
      templates/static/js/cropper.min.js

+ 2 - 2
templates/backstageNet/production/cropcount.html
Просмотреть файл 

@@ -686,7 +686,7 @@
 
                         },
 
                         },
 
                         error: function (type) {
 
                         error: function (type) {
 
                             console.log(type)
 
                             console.log(type)
 
-                            alert('失败')
 
+                            // alert('失败')
 
                         }
 
                         }
 
                     })
 
                     })
 
                 }
 
                 }
 
@@ -926,7 +926,7 @@
 
                 },
 
                 },
 
                 error: function (type) {
 
                 error: function (type) {
 
                     console.log(type)
 
                     console.log(type)
 
-                    alert('失败')
 
+                    // alert('失败')
 
                 }
 
                 }
 
             })
 
             })
 
         }
 
         }

+ 686 - 0
templates/backstageNet/systemSet/imageUpload.html
Просмотреть файл 

@@ -0,0 +1,686 @@
 
+{% load staticfiles %}
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+    <title>新闻发布</title>
 
+    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
 
+    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
 
+    <link rel="stylesheet" href="{% static '/css/cropper.min.css' %}">
 
+    <link rel="stylesheet" href="{% static '/css/ImgCropping.css' %}">
 
+    <style>
 
+        .breadcrumbs {
 
+            padding: 12px 0 12px 30px;
 
+            border-bottom: 1px solid #dbdbdb;
 
+        }
 
+
 
+        .layui-breadcrumb>* {
 
+            font-size: 16px;
 
+        }
 
+
 
+        .fixedDiv {
 
+            position: fixed;
 
+            width: 100%;
 
+            z-index: 999;
 
+            box-shadow: 0px 3px 5px 0px #ececec;
 
+            background: #fff;
 
+        }
 
+
 
+        /* 发布类型 */
 
+
 
+        .widget-title {
 
+            position: relative;
 
+            padding-left: 10px;
 
+            font-size: 16px;
 
+            padding: 5px 0 5px 10px;
 
+        }
 
+
 
+        .widget-title::after {
 
+            position: absolute;
 
+            content: '';
 
+            left: 0;
 
+            top: 9px;
 
+            height: 15px;
 
+            border-left: 5px solid #23a3ee;
 
+            padding-left: 10px;
 
+            font-size: 16px;
 
+            padding: 5px 0 5px 10px;
 
+        }
 
+
 
+        .widget-title h2 {
 
+            font-weight: 700;
 
+            line-height: 33px;
 
+        }
 
+
 
+        .widget-title h2 span {
 
+            font-size: 13px;
 
+            font-weight: 100;
 
+            margin-left: 20px;
 
+            color: #333;
 
+        }
 
+
 
+
 
+
 
+        /* 上传详情 */
 
+
 
+        .layui-form-item .layui-input-inline {
 
+            width: 50%;
 
+        }
 
+
 
+        .uploadContent,
 
+        .advertisingUp {
 
+            /* border-top: 7px solid #f0f0f0; */
 
+            padding: 25px;
 
+        }
 
+
 
+        .uploadUl>li {
 
+            display: none;
 
+        }
 
+
 
+        .uploadUl>li:first-child {
 
+            display: block;
 
+        }
 
+
 
+        .innerDiv {
 
+            max-width: 500px;
 
+        }
 
+
 
+        /* 图片预览 */
 
+
 
+        .layui-upload-img {
 
+            width: 92px;
 
+            height: 92px;
 
+            margin: 0 10px 10px 0;
 
+        }
 
+
 
+        #progressBar {
 
+            display: none;
 
+        }
 
+
 
+        /* 产品展厅上传多图 */
 
+
 
+        .uploadParent {
 
+            position: absolute;
 
+            margin: 10px 0;
 
+        }
 
+
 
+        .uploadParent>div {
 
+            display: inline-block;
 
+            width: 92px;
 
+            height: 92px;
 
+            /* border: 1px solid #b8b8b8; */
 
+            background: url(../../static/imgs/addicon.png) no-repeat center;
 
+            background-size: 80% 80%;
 
+            cursor: pointer;
 
+            margin-right: 8px;
 
+        }
 
+
 
+        .uploadShowParent .layui-upload-list {
 
+            display: inline-block;
 
+        }
 
+
 
+        /* 表单样式 */
 
+
 
+        .layui-form-item .layui-input-inline {
 
+            width: 50%;
 
+        }
 
+
 
+        .layui-form-item .layui-input-textarea {
 
+            width: 50%;
 
+        }
 
+
 
+        .uploadImg {
 
+            position: absolute;
 
+            margin: 10px 0;
 
+            width: 92px;
 
+            height: 92px;
 
+            background: none;
 
+            border: 1px solid #b8b8b8;
 
+            cursor: pointer;
 
+        }
 
+
 
+        .uploadImgIcon {
 
+            background: url(../../static/imgs/uploadImgIcon.png) no-repeat center;
 
+            background-size: 80% 80%;
 
+        }
 
+
 
+        /* 地图 */
 
+        .layui-form-label {
 
+            width: 102px;
 
+        }
 
+
 
+        .mapBox {
 
+            display: flex;
 
+        }
 
+
 
+        .map {
 
+            width: 55%;
 
+            height: 400px;
 
+            border: 1px solid #878787;
 
+        }
 
+
 
+        .locatPoint button {
 
+            padding: 5px 10px;
 
+            border-radius: 4px;
 
+            margin: 10px 20px 5px;
 
+            color: #fff;
 
+        }
 
+
 
+        .locatPoint button.sw {
 
+            background-color: #ed9c22;
 
+        }
 
+
 
+        .locatPoint button.ne {
 
+            background-color: #22a3ed;
 
+
 
+        }
 
+
 
+        .locatPoint button.center {
 
+            background-color: #ed2289;
 
+
 
+        }
 
+
 
+        /* 广告位-开始上传、取消上传按钮 */
 
+        .imgListAction,
 
+        .delImgData {
 
+            display: none;
 
+        }
 
+
 
+        /* 轮播图-开始上传、取消上传按钮 */
 
+        .testListAction,
 
+        .delTestData {
 
+            display: none;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="content">
 
+        <div class="floatNav">
 
+            <!-- 导航 -->
 
+            <div class="breadcrumbs">
 
+                <span class="layui-breadcrumb">
 
+                    <a target="BoardRight">首页</a>
 
+                    <a>
 
+                        <cite>图片上传</cite>
 
+                    </a>
 
+                </span>
 
+            </div>
 
+        </div>
 
+
 
+        <!-- 内容 -->
 
+        <div>
 
+            <!-- 发布详情 -->
 
+            <div class="uploadContent" id="uploadContent">
 
+                <div class="widget-title">
 
+                    <h2>首页轮播图上传
 
+                        <span id="Uptime"></span>
 
+                    </h2>
 
+                </div>
 
+
 
+                <!-- 上传 -->
 
+                <div class="layui-upload">
 
+                    <span class="">轮播图片：</span>
 
+                    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片</button>
 
+                    <div id="demo1" style="margin-top: 10px">
 
+                        <img src="" alt="" style="width: 1200px; height: 470px;" class="layui-upload-img"
 
+                            id="carouselImg">
 
+                    </div>
 
+                    <button type="button" class="layui-btn testListAction" id="testListAction">开始上传</button>
 
+                    <button type="button" class="layui-btn layui-btn-danger delTestData" id="delTestData">取消上传</button>
 
+                </div>
 
+            </div>
 
+
 
+            <!-- 广告位 -->
 
+            <div class="advertisingUp">
 
+                <div class="widget-title">
 
+                    <h2>首页广告位图上传
 
+                        <span id="Uptime"></span>
 
+                    </h2>
 
+                </div>
 
+
 
+                <!-- 上传 -->
 
+                <div class="layui-upload">
 
+                    <span class="">广告位图片：</span>
 
+                    <button type="button" class="layui-btn layui-btn-normal" id="replaceImg">选择图片</button>
 
+                    <div id="demo2" style="margin-top: 10px">
 
+                        <img src="" alt="" style="width: 1200px; height: 90px;" class="layui-upload-img" id="finalImg">
 
+                    </div>
 
+                    <button type="button" class="layui-btn imgListAction" id="imgListAction">开始上传</button>
 
+                    <button type="button" class="layui-btn layui-btn-danger delImgData" id="delImgData">取消上传</button>
 
+                </div>
 
+            </div>
 
+        </div>
 
+
 
+        <!--图片裁剪框 start广告位-->
 
+        <div style="display: none" class="tailoring-container1">
 
+            <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>
 
+                </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>
 
+        <!--图片裁剪框 end广告位-->
 
+
 
+
 
+        <!--图片裁剪框 start首页轮播-->
 
+        <div style="display: none" class="tailoring-container2">
 
+            <div class="black-cloth" onclick="closeTailorA(this)"></div>
 
+            <div class="tailoring-content">
 
+                <div class="tailoring-content-one">
 
+                    <label title="上传图片" for="chooseImgA" class="l-btn choose-btn">
 
+                        <input type="file" accept="image/jpg,image/jpeg,image/png" name="fileA" id="chooseImgA"
 
+                            class="hidden" onchange="selectImgA(this)">
 
+                        选择图片
 
+                    </label>
 
+                    <div class="close-tailoring" onclick="closeTailorA(this)">×</div>
 
+                </div>
 
+                <div class="tailoring-content-two">
 
+                    <div class="tailoring-box-parcel">
 
+                        <img id="carouselingImg">
 
+                    </div>
 
+                    <div class="preview-box-parcel">
 
+                        <p>图片预览：</p>
 
+                        <div class="square previewImgA"></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="carousesureCut">确定</button>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <!--图片裁剪框 end首页轮播-->
 
+
 
+    </div>
 
+
 
+
 
+    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
 
+    <script src="{% static '/lib/layui/layui.js'%}"></script>
 
+    <script src="{% static 'lib/ckeditor/ckeditor.js'%}"></script>
 
+    <script src="{% static 'lib/ckeditor/lang/zh-cn.js'%}"></script>
 
+    <script src="{% static '/js/backstageNet/common.js'%}"></script>
 
+    <script src="{% static '/js/cropper.min.js'%}"></script>
 
+    <script>
 
+        var element, form, upload;
 
+        var advertisingName //广告位上传图片名称
 
+        var carouselName //轮播图上传图片名称
 
+        layui.use(['element', 'form', 'upload', 'layer'], function () {
 
+            element = layui.element;
 
+            form = layui.form;
 
+            upload = layui.upload;
 
+            layer = layui.layer;
 
+            // $ = layui.jquery
 
+        });
 
+
 
+        windowAddMouseWheel();
 
+        function windowAddMouseWheel() {
 
+            var scrollFunc = function (e) {
 
+                e = e || window.event;
 
+                var top = $(window).scrollTop();
 
+                if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
 
+                    if (e.wheelDelta > 0) { //当滑轮向上滚动时
 
+                        if (top < 60) {
 
+                            if ($(".floatNav").hasClass("fixedDiv")) {
 
+                                $(".floatNav").removeClass("fixedDiv");
 
+                                $(window).scrollTop(0)
 
+                            }
 
+                        }
 
+                    }
 
+                    if (e.wheelDelta < 0) { //当滑轮向下滚动时
 
+                        if (top >= 60) {
 
+                            $(".floatNav").addClass("fixedDiv");
 
+                        }
 
+                    }
 
+                } else if (e.detail) {  //Firefox滑轮事件
 
+                    if (e.detail > 0) { //当滑轮向上滚动时
 
+                        if (top < 60) {
 
+                            if ($(".floatNav").hasClass("fixedDiv")) {
 
+                                $(".floatNav").removeClass("fixedDiv");
 
+                                $(window).scrollTop(0)
 
+                            }
 
+                        }
 
+                    }
 
+                    if (e.detail < 0) { //当滑轮向下滚动时
 
+                        if (top >= 60) {
 
+                            $(".floatNav").addClass("fixedDiv");
 
+                        }
 
+                    }
 
+                }
 
+            };
 
+            //给页面绑定滑轮滚动事件
 
+            if (document.addEventListener) {
 
+                document.addEventListener('DOMMouseScroll', scrollFunc, false);
 
+            }
 
+            //滚动滑轮触发scrollFunc方法
 
+            window.onmousewheel = document.onmousewheel = scrollFunc;
 
+        }
 
+
 
+        // 广告位开始上传按钮监听事件
 
+        $('#imgListAction').on('click', function () {
 
+            var timestamp = Date.parse(new Date());
 
+            var arr = imgArr.split(','), mime = arr[0].match(/:(.*?);/)[1]
 
+            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
 
+            while (n--) {
 
+                u8arr[n] = bstr.charCodeAt(n);
 
+            }
 
+            var imgFile = new File([u8arr], timestamp, { type: mime })
 
+            console.log(imgFile)
 
+
 
+            // var timestamp = Date.parse(new Date());
 
+            // var arr = base64url.split(','), mime = arr[0].match(/:(.*?);/)[1]
 
+            // if (imgArr.length == 1) {
 
+            //     var arr = imgArr[0].split(','), mime = arr[0].match(/:(.*?);/)[1],
 
+            // } else if (imgArr.length == 2) {
 
+            //     var arr = imgArr[1].split(','), mime = arr[0].match(/:(.*?);/)[1],
 
+            // } else if (imgArr.length == 3) {
 
+            //     var arr = imgArr[2].split(','), mime = arr[0].match(/:(.*?);/)[1],
 
+            // }
 
+            // var arr = imgArr[0].split(','), mime = arr[0].match(/:(.*?);/)[1],
 
+            // bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
 
+            // while (n--) {
 
+            //     u8arr[n] = bstr.charCodeAt(n);
 
+            // }
 
+            // var imgFile = new File([u8arr], timestamp, { type: mime })
 
+        });
 
+
 
+        // 广告位取消上传按钮监听事件
 
+        $('#delImgData').on('click', function () {
 
+            layer.confirm('是否删除已上传的图片', {
 
+                btn: ['确定', '取消'] //按钮
 
+            }, function () {
 
+                imgArr = [] //清空数组数据
 
+                $('#demo2 img').remove();  //删除所有img
 
+                $('#imgListAction').addClass('imgListAction') //隐藏上传按钮
 
+                $('#delImgData').addClass('delImgData') //隐藏取消按钮
 
+                layer.msg('删除成功', { icon: 1 });
 
+            }, function () {
 
+                layer.msg('取消删除', { icon: 1 });
 
+            });
 
+        });
 
+
 
+        //广告位上传图片按钮监听事件
 
+        $('#replaceImg').on('click', function () {
 
+            // $("#replaceImg").addClass("layui-btn-disabled")
 
+            //弹出图片裁剪框
 
+            boxSize1 = 40
 
+            boxSize2 = 3
 
+            $("#replaceImg").on("click", function () {
 
+                $(".tailoring-container1").toggle();
 
+            });
 
+        });
 
+
 
+        //弹出框水平垂直居中
 
+        (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
 
+                });
 
+            }
 
+        })();
 
+
 
+        //广告位图像上传
 
+        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，适应高度，不失真
 
+            }
 
+            advertisingName = fileA.files[0].name
 
+            reader.readAsDataURL(file.files[0]);
 
+        }
 
+        //cropper图片裁剪
 
+        $('#tailoringImg').cropper({
 
+            aspectRatio: 40 / 3,//默认比例
 
+            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地址形式
 
+                imgArr = base64url
 
+                console.log(imgArr)
 
+                $("#finalImg").prop("src", base64url);//显示为图片的形式
 
+                //关闭裁剪框
 
+                closeTailor();
 
+                $('#imgListAction').removeClass('imgListAction')
 
+                $('#delImgData').removeClass('delImgData')
 
+
 
+
 
+                // var timestamp = Date.parse(new Date());
 
+                // var arr = base64url.split(','), mime = arr[0].match(/:(.*?);/)[1],
 
+                //     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
 
+                // while (n--) {
 
+                //     u8arr[n] = bstr.charCodeAt(n);
 
+                // }
 
+                // var imgFile = new File([u8arr], timestamp, { type: mime })
 
+                // imgArr.push(imgFile)
 
+                // if (imgArr.length == 1) {
 
+                //     $('#demo2').append('<img src="' + imgArr[0] + '"class="layui-upload-img">')
 
+                // } else if (imgArr.length == 2) {
 
+                //     $('#demo2').append('<img src="' + imgArr[1] + '" class="layui-upload-img">')
 
+                // } else if (imgArr.length == 3) {
 
+                //     $('#demo2').append('<img src="' + imgArr[2] + '"class="layui-upload-img">')
 
+                // }
 
+
 
+
 
+
 
+
 
+            }
 
+        });
 
+        //广告位关闭裁剪框
 
+        function closeTailor() {
 
+            $(".tailoring-container1").toggle();
 
+        }
 
+
 
+
 
+
 
+        // 首页轮播开始上传按钮监听事件
 
+        $('#testListAction').on('click', function () {
 
+            // var timestamp = Date.parse(new Date());
 
+            // var arr = imgArrA.split(','), mime = arr[0].match(/:(.*?);/)[1]
 
+            //     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
 
+            // while (n--) {
 
+            //     u8arr[n] = bstr.charCodeAt(n);
 
+            // }
 
+            // var imgFile = new File([u8arr], timestamp, { type: mime })
 
+        });
 
+
 
+        // 首页轮播取消上传按钮监听事件
 
+        $('#delTestData').on('click', function () {
 
+            layer.confirm('是否删除已上传的图片', {
 
+                btn: ['确定', '取消'] //按钮
 
+            }, function () {
 
+                imgArr = [] //清空数组数据
 
+                $('#demo1 img').remove();  //删除所有img
 
+                $('#testListAction').addClass('testListAction') //隐藏上传按钮
 
+                $('#delTestData').addClass('delTestData') //隐藏取消按钮
 
+                layer.msg('删除成功', { icon: 1 });
 
+            }, function () {
 
+                layer.msg('取消删除', { icon: 1 });
 
+            });
 
+        });
 
+
 
+        //首页轮播上传图片按钮监听事件
 
+        $('#testList').on('click', function () {
 
+            // $("#replaceImg").addClass("layui-btn-disabled")
 
+            boxSize1 = 4
 
+            boxSize2 = 1
 
+            //弹出图片裁剪框
 
+            $("#testList").on("click", function () {
 
+                $(".tailoring-container2").toggle();
 
+            });
 
+        });
 
+
 
+        //首页轮播图像上传
 
+        function selectImgA(fileA) {
 
+            if (!fileA.files || !fileA.files[0]) {
 
+                return;
 
+            }
 
+            var reader = new FileReader();
 
+            reader.onload = function (evt) {
 
+                var replaceSrc = evt.target.result;
 
+                //更换cropper的图片
 
+                $('#carouselingImg').cropper('replace', replaceSrc, false);//默认false，适应高度，不失真
 
+            }
 
+            carouselName = fileA.files[0].name
 
+            reader.readAsDataURL(fileA.files[0]);
 
+        }
 
+        //cropper图片裁剪
 
+        $('#carouselingImg').cropper({
 
+            aspectRatio: 4 / 1,//默认比例
 
+            preview: '.previewImgA',//预览视图
 
+            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 () {
 
+            $('#carouselingImg').cropper("rotate", 45);
 
+        });
 
+        //首页轮播复位
 
+        $(".cropper-reset-btn").on("click", function () {
 
+            $('#carouselingImg').cropper("reset");
 
+        });
 
+        //首页轮播换向
 
+        var flagX = true;
 
+        $(".cropper-scaleX-btn").on("click", function () {
 
+            if (flagX) {
 
+                $('#carouselingImg').cropper("scaleX", -1);
 
+                flagX = false;
 
+            } else {
 
+                $('#carouselingImg').cropper("scaleX", 1);
 
+                flagX = true;
 
+            }
 
+            flagX != flagX;
 
+        });
 
+
 
+        //首页轮播裁剪后的处理
 
+        $("#carousesureCut").on("click", function () {
 
+            if ($("#carouselingImg").attr("src") == null) {
 
+                return false;
 
+            } else {
 
+                var cas = $('#carouselingImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
 
+                var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
 
+                imgArrA = base64url
 
+                $("#carouselImg").prop("src", base64url);//显示为图片的形式
 
+                //关闭裁剪框
 
+                closeTailorA();
 
+                $('#testListAction').removeClass('testListAction')
 
+                $('#delTestData').removeClass('delTestData')
 
+                var arr = imgArrA.split(','), mime = arr[0].match(/:(.*?);/)[1]
 
+                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
 
+                while (n--) {
 
+                    u8arr[n] = bstr.charCodeAt(n);
 
+                }
 
+                var imgFile = new File([u8arr], carouselName, { type: mime })
 
+                var form = new FormData()
 
+                form.append('upload', imgFile)
 
+                $.ajax({
 
+                    url: 'system_photo',
 
+                    type: 'post',
 
+                    data: form,
 
+                    processData: false, // 告诉jQuery不要去处理发送的数据
 
+                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
 
+                    success: function (data) {
 
+                        console.log(data)
 
+                    },
 
+                    error: function (err) {
 
+                        console.log(err)
 
+                    }
 
+                })
 
+            }
 
+        });
 
+        //首页轮播关闭裁剪框
 
+        function closeTailorA() {
 
+            $(".tailoring-container2").toggle();
 
+        }
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 1 - 1
templates/outerNet/tourist.html
Просмотреть файл 

@@ -68,7 +68,7 @@
 
                         <div class="sendTime title">{{sightsee.upl_time}}</div>
 
                         <div class="sendTime title">{{sightsee.upl_time}}</div>
 
                         <div class="prodectIntro">
 
                         <div class="prodectIntro">
 
                             <div class="prodectImg">
 
                             <div class="prodectImg">
 
-                                <img src="http://127.0.0.1:8000/{{sightsee.sightisee_img }}" alt="">
 
+                                <img src="http://127.0.0.1:8000/{{sightsee.sightsee_img}}" alt="">
 
                             </div>
 
                             </div>
 
                             <div class="descTxt">
 
                             <div class="descTxt">
 
                                 <div><span>景点名称：</span>{{sightsee.name}}</div>
 
                                 <div><span>景点名称：</span>{{sightsee.name}}</div>

+ 1 - 1
templates/outerNet/touristList.html
Просмотреть файл 

@@ -56,7 +56,7 @@
 
                          {% if sightsee|length %} {% for hotelItem in sightsee %}
 
                          {% if sightsee|length %} {% for hotelItem in sightsee %}
 
                         <li class="hotelItem">
 
                         <li class="hotelItem">
 
                             <a href="tourist?id={{hotelItem.id}}">
 
                             <a href="tourist?id={{hotelItem.id}}">
 
-                                <img src="{{hotelItem.hotel_img}}" alt="">
 
+                                <img src="http://127.0.0.1:8000/{{hotelItem.sightsee_img}}" alt="">
 
                                 <div class="hotelDetial">
 
                                 <div class="hotelDetial">
 
                                     <h2>{{hotelItem.name}}</h2>
 
                                     <h2>{{hotelItem.name}}</h2>
 
                                     <div class="abstract-wrap">
 
                                     <div class="abstract-wrap">

+ 286 - 0
templates/static/css/ImgCropping.css
Просмотреть файл 

@@ -0,0 +1,286 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+
 
+.l-btn {
 
+    display: inline-block;
 
+    outline: none;
 
+    resize: none;
 
+    border: none;
 
+    padding: 5px 10px;
 
+    background: #8C85E6;
 
+    color: #fff;
 
+    border: solid 1px #8C85E6;
 
+    border-radius: 3px;
 
+    font-size: 14px;
 
+}
 
+
 
+.l-btn:hover {
 
+    background: #8078e3;
 
+    animation: anniu 1s infinite;
 
+}
 
+
 
+.l-btn:active {
 
+    box-shadow: 0 2px 3px rgba(0, 0, 0, .2) inset;
 
+}
 
+
 
+.hidden {
 
+    display: none;
 
+}
 
+
 
+/* .tailoring-container,
 
+.tailoring-container div,
 
+.tailoring-container p { */
 
+.tailoring-container1,
 
+.tailoring-container1 div,
 
+.tailoring-container1 p {
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+    -webkit-box-sizing: border-box;
 
+    -moz-box-sizing: border-box;
 
+}
 
+
 
+.tailoring-container2,
 
+.tailoring-container2 div,
 
+.tailoring-container2 p {
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+    -webkit-box-sizing: border-box;
 
+    -moz-box-sizing: border-box;
 
+}
 
+
 
+/* .tailoring-container { */
 
+.tailoring-container1 {
 
+    position: fixed;
 
+    width: 100%;
 
+    height: 100%;
 
+    z-index: 1000;
 
+    top: 0;
 
+    left: 0;
 
+}
 
+
 
+.tailoring-container2 {
 
+    position: fixed;
 
+    width: 100%;
 
+    height: 100%;
 
+    z-index: 1000;
 
+    top: 0;
 
+    left: 0;
 
+}
 
+
 
+/* .tailoring-container .black-cloth { */
 
+.tailoring-container1 .black-cloth {
 
+    position: fixed;
 
+    width: 100%;
 
+    height: 100%;
 
+    background: #111;
 
+    opacity: .9;
 
+    z-index: 1001;
 
+}
 
+
 
+.tailoring-container2 .black-cloth {
 
+    position: fixed;
 
+    width: 100%;
 
+    height: 100%;
 
+    background: #111;
 
+    opacity: .9;
 
+    z-index: 1001;
 
+}
 
+
 
+/* .tailoring-container .tailoring-content{ */
 
+.tailoring-container1 .tailoring-content {
 
+    position: absolute;
 
+    width: 768px;
 
+    height: 560px;
 
+    background: #fff;
 
+    z-index: 1002;
 
+    left: 0;
 
+    top: 0;
 
+
 
+    /* 水平垂直居中 浏览器版本号低的不支持transform */
 
+    /*left: 50%;
 
+    top: 50%;
 
+    transform: translate(-50%,-50%);
 
+    -weblit-transform: translate(-50%,-50%);
 
+    -moz-transform: translate(-50%,-50%);
 
+    -ms-transform: translate(-50%,-50%);
 
+    -o-transform: translate(-50%,-50%);*/
 
+
 
+    border-radius: 10px;
 
+    box-shadow: 0 0 10px #000;
 
+    padding: 10px;
 
+}
 
+
 
+.tailoring-container2 .tailoring-content {
 
+    position: absolute;
 
+    width: 768px;
 
+    height: 560px;
 
+    background: #fff;
 
+    z-index: 1002;
 
+    left: 0;
 
+    top: 0;
 
+
 
+    /* 水平垂直居中 浏览器版本号低的不支持transform */
 
+    /*left: 50%;
 
+    top: 50%;
 
+    transform: translate(-50%,-50%);
 
+    -weblit-transform: translate(-50%,-50%);
 
+    -moz-transform: translate(-50%,-50%);
 
+    -ms-transform: translate(-50%,-50%);
 
+    -o-transform: translate(-50%,-50%);*/
 
+
 
+    border-radius: 10px;
 
+    box-shadow: 0 0 10px #000;
 
+    padding: 10px;
 
+}
 
+
 
+.tailoring-content-one {
 
+    height: 40px;
 
+    width: 100%;
 
+    border-bottom: 1px solid #DDD;
 
+}
 
+
 
+.tailoring-content .choose-btn {
 
+    float: left;
 
+}
 
+
 
+.tailoring-content .close-tailoring {
 
+    display: inline-block;
 
+    height: 30px;
 
+    width: 30px;
 
+    border-radius: 100%;
 
+    background: #eee;
 
+    color: #fff;
 
+    font-size: 22px;
 
+    text-align: center;
 
+    line-height: 30px;
 
+    float: right;
 
+    cursor: pointer;
 
+}
 
+
 
+.tailoring-content .close-tailoring:hover {
 
+    background: #ccc;
 
+}
 
+
 
+.tailoring-content .tailoring-content-two {
 
+    width: 100%;
 
+    height: 460px;
 
+    position: relative;
 
+    padding: 5px 0;
 
+}
 
+
 
+.tailoring-content .tailoring-box-parcel {
 
+    width: 520px;
 
+    height: 450px;
 
+    position: absolute;
 
+    left: 0;
 
+    border: solid 1px #ddd;
 
+}
 
+
 
+.tailoring-content .preview-box-parcel {
 
+    display: inline-block;
 
+    width: 228px;
 
+    height: 450px;
 
+    position: absolute;
 
+    right: 0;
 
+    padding: 4px 14px;
 
+}
 
+
 
+.preview-box-parcel p {
 
+    color: #555;
 
+}
 
+
 
+.previewImg {
 
+    width: 200px;
 
+    height: 200px;
 
+    overflow: hidden;
 
+}
 
+
 
+.previewImgA {
 
+    width: 200px;
 
+    height: 200px;
 
+    overflow: hidden;
 
+}
 
+
 
+.preview-box-parcel .square {
 
+    margin-top: 10px;
 
+    border: solid 1px #ddd;
 
+}
 
+
 
+.preview-box-parcel .circular {
 
+    border-radius: 100%;
 
+    margin-top: 10px;
 
+    border: solid 1px #ddd;
 
+}
 
+
 
+.tailoring-content .tailoring-content-three {
 
+    width: 100%;
 
+    height: 40px;
 
+    border-top: 1px solid #DDD;
 
+    padding-top: 10px;
 
+}
 
+
 
+.sureCut {
 
+    float: right;
 
+}
 
+
 
+@media all and (max-width: 768px) {
 
+
 
+    /* .tailoring-container .tailoring-content { */
 
+    .tailoring-container1 .tailoring-content {
 
+        width: 100%;
 
+        min-width: 320px;
 
+        height: 460px;
 
+    }
 
+
 
+    .tailoring-content .tailoring-content-two {
 
+        height: 360px;
 
+    }
 
+
 
+    .tailoring-content .tailoring-box-parcel {
 
+        height: 350px;
 
+    }
 
+
 
+    /* .tailoring-container .tailoring-box-parcel { */
 
+    .tailoring-container1 .tailoring-box-parcel {
 
+        width: 100%;
 
+    }
 
+
 
+    /* .tailoring-container .preview-box-parcel { */
 
+    .tailoring-container1 .preview-box-parcel {
 
+        display: none;
 
+    }
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    .tailoring-container2 .tailoring-content {
 
+        width: 100%;
 
+        min-width: 320px;
 
+        height: 460px;
 
+    }
 
+
 
+    .tailoring-content .tailoring-content-two {
 
+        height: 360px;
 
+    }
 
+
 
+    .tailoring-content .tailoring-box-parcel {
 
+        height: 350px;
 
+    }
 
+
 
+    /* .tailoring-container .tailoring-box-parcel { */
 
+    .tailoring-container2 .tailoring-box-parcel {
 
+        width: 100%;
 
+    }
 
+
 
+    /* .tailoring-container .preview-box-parcel { */
 
+    .tailoring-container2 .preview-box-parcel {
 
+        display: none;
 
+    }
 
+}

Разница между файлами не показана из-за своего большого размера
+ 10 - 0
templates/static/css/cropper.min.css


Разница между файлами не показана из-за своего большого размера
+ 10 - 0
templates/static/js/cropper.min.js