Yezb
/
ss_new_ui_skin_and_page


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
							<%@ page language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib uri="/ssTag" prefix="ss"%>
<html>

<head>
	<script src="/js/load.js"></script><%-- 改为新的路径 Ben(20251205) --%>
<%--	<script src="../ss/js/base.js"></script>--%>
	<!-- <script src="../ss/js/cropper.js" type="text/javascript" charset="utf-8"></script> -->

	<style type="text/css">
		html,
		body {
			overflow: hidden;
		}

		.content {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		.cropper-content {
			width: 100%;
			height: calc(100% - 160px);
			background-color: #f2f2f2;
		}

		.cropper-tool-bra {
			width: 100%;
			height: 52px;
			margin: 10px 0px;
		}

		.cropper-tool-bra-list {
			padding: 0;
			height: 52px;
			margin: 0 auto;
			list-style: none;
			display: flex;
			justify-content: center;
		}

		.cropper-tool-bra-list li {
			width: 36px;
			font-size: 26px;
			font-weight: bolder;
			text-align: center;
			/* line-height: 52px; */
			color: #99a9bf;
			float: left;
			transition: all 0.3s;
		}

		.cropper-tool-bra-list li:hover {
			cursor: pointer;
			color: #409EFF;
		}

		.el-slider__bar {
			background-color: #E4E7ED;
		}

		.cropper-tool-bra-list .slider-wrap {
			width: 220px;
			padding: 6px;
		}

		.cat {
			display: inline-block;
			width: 30px !important;
			height: 30px !important;
			background: url(/skin/easy/images/cat.png) center center no-repeat !important; <%-- (/newUI/skin/easy/images/cat.png)。Lin(新UI) --%>
		}

		.rotate-icon {
			transform: rotate(90deg);
		}
	</style>

</head>

<body>
	<div id="app">

		<div class="content">
			<div class="cropper-content">
				<img id="cropper-content-img" src="" />
			</div>

			<div class="cropper-tool-bra">

				<ul class="cropper-tool-bra-list">
					
					<!-- <li onclick="cropper.zoom('-0.1')" style="line-height: 46px;">
						
						<el-tooltip class="item" effect="dark" content="缩小" placement="top-start">
							
							<i style="font-size: 20px;" class="el-icon-picture-outline"></i>
						</el-tooptip>
					</li>
					<li style="" class="slider-wrap">
						<el-slider v-model="sliderValue" :show-tooltip="false" :disabled="isDisabled"
							@input="sliderInput()" @change="sliderChange" :min="-50" :max="50"></el-slider>
					</li>
					<li onclick="cropper.zoom('0.1')">
						<el-tooltip class="item" effect="dark" content="放大" placement="top-start"><i
								class="el-icon-picture-outline"></i></el-tooptip>
					</li> -->
					<li onclick="cropper.maxCrop();" title="设置最大裁剪框" >
						<ss-icon name="full-screen"></ss-icon>
						<!-- <el-tooltip class="item" effect="dark" content="设置最大裁剪框" placement="top-start"><i
								class="el-icon-crop"></i></el-tooptip> -->
					</li>
					<!-- <li onclick="cropper.locaToTopBottomCenter();">
						<el-tooltip class="item" effect="dark" content="裁剪框上下居中" placement="top-start"><i
								class="el-icon-sort"></i></el-tooptip>
					</li>
					<li onclick="cropper.locaToLeftRightCenter();">
						<el-tooltip class="item" effect="dark" content="裁剪框左右居中" placement="top-start"><i
								class="el-icon-sort rotate-icon"></i></el-tooptip>
					</li> -->
					
					<li onclick='cropper.reset();' title="重置">
						<ss-icon name="refresh"></ss-icon>
					</li>
					<li onclick="cropper.rotate('-45')"  title="逆时针旋转45°">
						<ss-icon name="back"></ss-icon>
					</li>
					<li class="slider-wrap">
						<el-slider v-model="rotateValue" :show-tooltip="false" :disabled="isRotateDisabled"
							@input="rotateSliderInput()" @change="rotateSliderChange" :min="-50" :max="50"></el-slider>
					</li>
					<li onclick="cropper.rotate('45')"  title="顺时针旋转45°">
						<ss-icon name="reset"></ss-icon>
					</li>
				</ul>

			</div>

			<!-- <div class="bottom-div">
				<el-button type="primary">确定</el-button>
				<el-button 
					type="success">原图上传</el-button>
				<el-button onclick="SS.closeDialog();"  type="danger">取消</el-button>
			</div> -->
			<div class="bottom-div" style="bottom: 0;position: fixed;width: 100%;">
				<ss-bottom-button
				text="取消"
				onclick="SS.closeDialog()"
				icon-class="bottom-div-close"
			  ></ss-bottom-button>
			  <ss-bottom-button
				text="保存"
				onclick="cropper.getCroppedCanvas()"
				icon-class="bottom-div-save"
			  ></ss-bottom-button>
				<!-- <button onclick="SS.closeDialog()" type="button">
                    <span><ss-icon name="close-thin" size="20px" /></span>
                    <span>取消</span>
                </button>
				<button onclick="onDialogClose" type="button" v-if="originalPhotoUploadFlag" onclick="cropper.originalPhotoUpload();">
                    <span><ss-icon name="close-thin" size="20px" /></span>
                    <span>原图上传</span>
                </button>
                <button onclick="cropper.getCroppedCanvas()">
                    <span><ss-icon name="check-thin" size="14px" /></span>
                    <span>保存</span>
                </button> -->
            </div>
		</div>
	</div>
</body>

<script type="module">
    var setting = undefined;

    var cropper = {
            $image: undefined,
            init: function () {
                console.log('cropper初始化了');
                $("#cropper-content-img").attr("src", setting.data);
                cropper.$image = $("#cropper-content-img");
                console.log("cropper.$image", cropper.$image)
                setting.viewMode = setting.photoSize == undefined ? 0 : 1;
                if (setting.photoSize && !setting.photoSize.width && !setting.photoSize.height) {
                    setting.viewMode = 0;
                }

                if (setting.viewMode == 0) {
                    vue.$data.originalPhotoUploadFlag = true;
                    setting.aspectRatio = undefined;
                }
                else {
                    if (setting.photoSize && setting.photoSize.width && setting.photoSize.height) {
                        setting.aspectRatio = setting.photoSize.width / setting.photoSize.height;
                    }
                }

                cropper.$image.cropper({
                    aspectRatio: setting.aspectRatio,
                    viewMode: setting.viewMode, // 视点模式：【0：无限制；1:不能超出裁剪区域；】
                    dragMode: 'move', // 拖曳模式:'crop'*创建一个新的麦田盒,'move'*移动画布,'none'*无所事事
                    modal: true, // 是否显示黑色遮罩
                    guides: false, // 显示麦田盒上方的虚线。
                    center: true, // 显示位于“作物”框上方的中心指示器。
                    highlight: true, // 在“作物”框上方显示白色模式(突出显示“作物”框)。
                    background: true, // 是否显示透明背景
                    movable: true, // 是否可以移动图像
                    rotatable: true, // 可旋转
                    scalable: true, // 可伸缩
                    zoomable: true, // 可缩放
                    responsive: true, // 调整窗口大小时，重新渲染裁剪器
                    zoomOnWheel: true, // 通过移动鼠标使图像能够缩放
                    wheelZoomRatio: 0.1, // 定义缩放比率时，通过鼠标旋转放大图像。（滚动时放大或缩小的比例）
                    cropBoxMovable: true, // 通过拖动启用移动“裁剪”框。
                    CropBoxResizable: true, // 可以通过拖动调整裁剪框的大小
                    MinCropBoxWidth: 100,
                    minCropBoxHeight: 100,
                    ready: function () {
                        cropper.initStyle();
                    }
                });
            },
            initStyle: function () {
                $(".cropper-bg").css("width", "100%");

                $(".line-e").remove();
                $(".line-n").remove();
                $(".line-w").remove();
                $(".line-s").remove();
                $(".point-e").remove();
                $(".point-n").remove();
                $(".point-w").remove();
                $(".point-s").remove();
                $(".point-ne").remove();
                $(".point-nw").remove();
                $(".point-sw").remove();

                if (setting.box == '0') {
                    $(".cropper-view-box").css({
                        "outline": "none",
                        "outline-color": "none",
                        "border-radius": "100%",
                        "border": "2px solid #39f"
                    });

                    $(".point-se").css("border-radius", "100%");
                    $(".cropper-face").css("border-radius", "100%");
                } else {
                    $(".point-se").addClass("cat");
                }

            },
            replace: function replace(url) { // 重新渲染裁剪框
                cropper.$image.data('cropper').replace(url, false);
            },
            zoom: function (num) {
                cropper.$image.data('cropper').zoom(num);
            },
            zoomTo: function (num) {
                cropper.$image.data('cropper').zoomTo(num);
            },
            rotate: function (num) {
                cropper.$image.data('cropper').rotate(num);
            },
            reset: function () {
                cropper.$image.data('cropper').reset();
            },
            maxCrop: function () {
                cropper.$image.data('cropper').setCropBoxData({
                    width: 9999,
                    height: 9999
                });
            },
            // 裁剪框上下居中
            locaToTopBottomCenter: function () {
                var corpBoxData = cropper.$image.data('cropper').getCropBoxData();
                var containerData = cropper.$image.data('cropper').getContainerData();

                var top = ((containerData.height - corpBoxData.height) / 2);
                cropper.$image.data('cropper').setCropBoxData({
                    top: top
                });

            },
            // 裁剪框左右居中
            locaToLeftRightCenter: function () {

                var containerData = cropper.$image.data('cropper').getContainerData();
                var corpBoxData = cropper.$image.data('cropper').getCropBoxData();

                var left = ((containerData.width - corpBoxData.width) / 2);
                cropper.$image.data('cropper').setCropBoxData({
                    left: left
                });
            },
             
            getCroppedCanvas: function () { // 获取上传裁剪图片

                // space.plugins.loading.show();

                var hce = undefined;

                if (setting.photoSize) {
                    hce = cropper.$image.data('cropper').getCroppedCanvas({
                        width: setting.photoSize.width,
                        height: setting.photoSize.height,
                        imageSmoothingQuality: 'high',
                        fillColor: '#fff'
                    });
                } else {
                    hce = cropper.$image.data('cropper').getCroppedCanvas({
                        imageSmoothingQuality: 'high',
                        fillColor: '#fff'
                    });
                }
                
                hce.toBlob((blob) => {
                    // console.log('xxxsetting:'+JSON.stringify(setting))
                    
                    const urlParams = new URLSearchParams(window.location.search);
                    const paramsStr = urlParams.get('params');
                    
                    const params = JSON.parse(decodeURIComponent(paramsStr));
                    
                    
                    // space.plugins.loading.show();
                    const formData = new FormData();
                    formData.append('fileEdit', new File([blob], setting.fileName));
					formData.append("application", "");//如果没有这个，后台会报错
                    $.ajax(setting.uploadUrl, {
                        method: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: 'json',
                        success(data) {
                            
                            if (data.fileList.length > 0) {
                                const uploaderId = params.uploaderId;
                                if(window.parent && window.parent.SS && window.parent.SS.cropper) {
                                    const setting = window.top.SS.cropper.getSetting(uploaderId);
                                    if(setting && setting.success) {
                                        // 执行成功回调
                                        setting.success(data.fileList[0].path);
                                        if (setting.context && setting.context.SS) {
                                            setting.context.SS.closeDialog();
                                        } else {
                                            // 降级处理
                                            window.parent.SS.closeDialog();
                                        }
                                        // 清理设置
                                        window.top.SS.cropper.clearSetting(uploaderId);
                                    }
                                }
                            } else {
                                console.log('data.data[0].msg',data.data[0].msg)
                                // space.plugins.loading.close();
                                // space.message.error(data.data[0].msg);
                            }
                        },
                        error() {
							alert('error');
                        // 	console.log(setting.success)
                            // space.plugins.loading.close();
                            // space.message.error("系统繁忙，请稍后再试");
                        }
                    });
                });

            },
            // 原图上传
            originalPhotoUpload: function () {
                // space.plugins.loading.show();
                const formData = new FormData();
                formData.append('fileEdit', setting.file);
                $.ajax("@service{ name:'uploadAjax' }@", {
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success(data) {
                        if (data.code == "success") {
                            setting.success(data.data[0].msg);
                            // space.allFunction.closeDialog();
                        } else {
                            // space.plugins.loading.close();
                            // space.message.error(data.data[0].msg);
                        }
                    },
                    error() {
                        // space.plugins.loading.close();
                        // space.message.error("系统繁忙，请稍后再试");
                    }
                });
            }
        }
    window.cropper = cropper;
    SS.ready(function () {
        SS.vue = SS.dom.initializeFormApp({
            el: '#app',
            data() {
                return {
                    sliderValue: 0, //滑块初始值
                    sliderBeforeValue: 0,
                    isDisabled: true, //滑块是否禁用
                    rotateValue: 0, //旋转滑块初始值
                    rotateBeforeValue: 0,
                    isRotateDisabled: true, //旋转滑块是否禁用
                    originalPhotoUploadFlag: false,
                }
            },
            methods: {
                formatTooltip(val) {
                    return val / 100;
                },
                sliderInput() {
                    if (downFlag) {
                        if (this.sliderBeforeValue > this.sliderValue) {
                            cropper.zoom("-0.1");
                        } else {
                            cropper.zoom("0.1");
                        }
                        this.sliderBeforeValue = this.sliderValue;
                    }
                },
                sliderChange() {

                    var _this = this;
                    var timer;

                    if (this.sliderValue > 0) {

                        timer = setInterval(function () {
                            _this.sliderValue -= 10;
                            if (_this.sliderValue <= 0) {
                                _this.sliderValue = 0
                                clearInterval(timer)
                            }
                        }, _this.sliderValue / 2)

                    } else {
                        timer = setInterval(function () {
                            _this.sliderValue += 10;
                            if (_this.sliderValue >= 0) {
                                _this.sliderValue = 0
                                clearInterval(timer)
                            }
                        }, -_this.sliderValue / 2)
                    }

                },
                rotateSliderInput() {
                    if (downFlag) {
                        if (this.rotateBeforeValue > this.rotateValue) {
                            cropper.rotate("-1");
                        } else {
                            cropper.rotate("1");
                        }
                        this.rotateBeforeValue = this.rotateValue;
                    }
                },
                rotateSliderChange() {

                    var _this = this;
                    var timer;

                    if (this.rotateValue > 0) {

                        timer = setInterval(function () {
                            _this.rotateValue -= 10;
                            if (_this.rotateValue <= 0) {
                                _this.rotateValue = 0
                                clearInterval(timer)
                            }
                        }, _this.rotateValue / 2)

                    } else {
                        timer = setInterval(function () {
                            _this.rotateValue += 10;
                            if (_this.rotateValue >= 0) {
                                _this.rotateValue = 0
                                clearInterval(timer)
                            }
                        }, -_this.rotateValue / 2)
                    }

                }
            }
        });

        var downFlag = false;
        var winInterval = undefined;
        $(document).ready(function () {

            // space.plugins.loading.show();

            $(window).on("mousedown", function () {
                downFlag = true;
            });

            $(window).on("mouseup", function () {
                downFlag = false;
            });
            // 获取到vue实例
            console.log(SS.vue.$data)

            //滑块禁用模式改为启用
            SS.vue.$data.isDisabled = false;
            SS.vue.$data.isRotateDisabled = false;
            var param = SS.getQueryParams();
            window.cropperSetting = param.params;
            console.log('初始化裁剪插件',window.cropperSetting);
            // console.log("cropper.html中的window.cropperSetting", window.cropperSetting)
            winInterval = setInterval(function () {
                if (!window.cropperSetting) {
                    return;
                }
                window.clearInterval(winInterval);
                setting = window.cropperSetting;
                cropper.init();
                // space.plugins.loading.close();
            }, 100);

        });

    });
</script>

</html>