xtu_mall/app/admin/view/general/attachments/cropper.html

<!doctype html>
<html lang="en">

<head>
    {include file="common/meta" /}
    <link rel="stylesheet" href="__CDN__/assets/libs/cropper/cropper.min.css">
    <link rel="stylesheet" href="__CDN__/assets/libs/cropper/main.css">
    <style type="text/css">
    .layui-btn-group+.layui-btn-group {
        margin-left: 0px;
    }

    .layui-container {
        width: 100% !important;
    }

    .modal-body {
        width: 300px;
    }

    .modal-body canvas {
        width: 100%;
    }
    </style>
</head>

<body style="padding: 10px;">
    <div class="layui-container" style="overflow: hidden;">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md8 layui-col-sm8">
                <div class="img-container">
                    <img id="image" src="{$Request.get.url}" alt="Picture">
                </div>
            </div>
            <div class="layui-col-md4 layui-col-sm4">
                <div class="docs-preview clearfix">
                    <div class="img-preview preview-lg"></div>
                    <div class="img-preview preview-md"></div>
                    <div class="img-preview preview-sm"></div>
                    <div class="img-preview preview-xs"></div>
                </div>
                <div class="docs-data layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 80px;">宽度</label>
                        <div class="layui-input-inline" style="width: 80px;">
                            <input type="text" id="dataWidth" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">PX</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 80px;">高度</label>
                        <div class="layui-input-inline" style="width: 80px;">
                            <input type="text" id="dataHeight" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">PX</div>
                    </div>
                </div>
                <div class="docs-toggles">
                    <div class="layui-btn-group">
                        <button type="button" class="layui-btn layui-btn-sm" data-name="aspectRatio" value="1.7777777777777777">16:9</button>
                        <button type="button" class="layui-btn layui-btn-sm" data-name="aspectRatio" value="1.3333333333333333">4:3</button>
                        <button type="button" class="layui-btn layui-btn-sm" data-name="aspectRatio" value="1">1:1</button>
                        <button type="button" class="layui-btn layui-btn-sm" data-name="aspectRatio" value="0.6666666666666666">2:3</button>
                        <button type="button" class="layui-btn layui-btn-sm" data-name="aspectRatio" value="NaN">自由</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row docs-buttons" style="text-align: center;">
            <div class="layui-col-md10 layui-col-sm10">
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-sm" data-method="setDragMode" data-option="move"><i class="iconfont icon-drag-move-2-fill"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm" data-method="setDragMode" data-option="crop"><i class="iconfont icon-crop-line"></i></button>
                </div>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-sm" data-method="zoom" data-option="0.1"><i class="iconfont icon-zoom-in-line"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm" data-method="zoom" data-option="-0.1"><i class="iconfont icon-zoom-out-line"></i></button>
                </div>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-sm" data-method="move" data-option="-10" data-second-option="0"><i class="iconfont icon-arrow-left-line"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm" data-method="move" data-option="10" data-second-option="0"><i class="iconfont icon-arrow-right-line"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm" data-method="move" data-option="0" data-second-option="-10"><i class="iconfont icon-arrow-up-line"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm" data-method="move" data-option="0" data-second-option="10"><i class="iconfont icon-arrow-down-line"></i></button>
                </div>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-sm" data-method="rotate" data-option="-45"><i class="iconfont icon-arrow-go-back-line"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm" data-method="rotate" data-option="45"><i class="iconfont icon-arrow-go-forward-line"></i></button>
                </div>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-sm" data-method="scaleX" data-option="-1"><i class="iconfont icon-expand-horizontal-line"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm" data-method="scaleY" data-option="-1"><i class="iconfont icon-expand-vertical-fill"></i></button>
                </div>
                <div class="layui-btn-group" style="position: relative;">
                    <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff" style="opacity:0;position: absolute;left: 37px;width: 37px;height: 30px; padding: 0;overflow: hidden;white-space: nowrap;border: 0;">
                    <button type="button" class="layui-btn layui-btn-sm" data-method="reset"><i class="iconfont icon-loop-left-line"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm"><i class="iconfont icon-upload-cloud-2-line"></i></button>
                    <button type="button" class="layui-btn layui-btn-sm getCroppedCanvas" data-method="getCroppedCanvas"><i class="iconfont icon-download-cloud-2-line"></i></button>
                </div>
            </div>
            <div id="getCroppedCanvasModal" style="display: none;">
                <div class="modal-content" style="padding: 20px;">
                    <h5 style="font-size: 16px;line-height: 2;">已剪裁</h5>
                    <div class="modal-body"></div>
                    <a href="javascript:;" type="button" class="layui-btn layui-btn-sm layui-btn-fluid" id="download" download="cropped.jpg">下载图片</a>
                </div>
            </div>
            <div class="layui-col-md2 layui-col-sm2">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal btn-submit">确定</button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-danger btn-cancel">取消</button>
            </div>
        </div>
    </div>
    {include file="common/script" /}
</body>

</html>