ThinkAdmin/app/data/view/base/config/cropper.html

{extend name="../../admin/view/main"}

{block name="content"}
<div class="think-box-shadow" id="ContentBox">
    <div class="padding-left-20 padding-right-20" style="max-width:800px">
        <div class="margin-top-10">
            <p>1. 上传邀请码的背景图片（ 支持 PNG 和 JPG 格式 ）</p>
            <p>2. 选择需要绘制二维码的区域，生成相对图片坐标参数</p>
            <p>3. 保存位置数据，下次可直接显示</p>
        </div>
        <div class="margin-top-20">
            <img alt="img" id="target" src="{$data.image|default='https://d3o1694hluedf9.cloudfront.net/market-750.jpg'}" style="width:800px;height:400px">
            <div class="margin-top-5">
                <label class="margin-top-5 block"><input class="layui-input layui-bg-gray" id="inputImage" readonly value=''></label>
                <label class="margin-top-5 block"><input class="layui-input layui-bg-gray" id="inputData" readonly value=''></label>
            </div>
        </div>
        <div class="margin-top-20 text-center">
            <a class="layui-btn layui-btn-primary margin-right-5" data-type="png,jpg" data-upload-image>上传背景图片</a>
            <span></span>
            <a class="layui-btn layui-btn-primary margin-left-5" data-upload-commit>保存配置参数</a>
        </div>
    </div>
    <label class="layui-hide">
        <textarea class="layui-textarea" id="DefaPostion">{$data.postion|default=''}</textarea>
    </label>
</div>

<script>
    // 默认绘制位置数据
    var defaData = JSON.parse($('#DefaPostion').val() || '{}');

    // 加载插件并显示界面
    require(['cropper'], function (Cropper) {
        (function (image, cropper) {
            cropper = new Cropper(image, {
                aspectRatio: 1,
                ready() {
                    if (typeof defaData === 'object') {
                        cropper.setData(defaData);
                    }
                },
                crop() {
                    $('#inputImage').val(image.src);
                    $('#inputData').val(JSON.stringify(cropper.getData()));
                },
            });
            // 背景图片切换
            $('[data-upload-image]').uploadFile(function (url) {
                image.src = url;
                console.log(cropper)
                // cropper.refresh();
                // cropper.resize();
                cropper.replace(url, true).reset();
            });
            // 保存设置参数
            $('[data-upload-commit]').on('click', function () {
                $.form.load('{:url("")}', {image: image.src, postion: JSON.stringify(cropper.getData())}, 'post');
            });
        })(document.getElementById('target'));
    });

    $(window).on('resize', function () {
        (function (height) {
            $('#ContentBox').css('minHeight', height + 'px')
        })($('.layui-layout-admin>.layui-body').height() - 120);
    }).trigger('resize');

</script>
{/block}