smms_law_re/resources/views/system/popup/imagePopWithCut2.blade.php

@section('css')
    @parent
    <link rel="stylesheet" href="{{ asset('css/croppie.min.css') }}">
    <style>
        .modal-xl {
            max-width: 1140px;
        }
    </style>
@stop

@section('js')
    @parent
    <script src="{{ asset('js/croppie.min.js') }}"></script>
    <script>
        let elPath = ""
        let oldPic = ""
        let croppie

        function imagePopUpCut(element, oriPicPth = '') {
            oriPic = ""
            $('#croppieContainer').hide();
            $('#sizeBtn').hide();
            $('#cropModal').hide();
            $('#showPopImg2').show();
            // split * -1 取最後一個
            elPath = element.src.split("*").pop()
            elPath = elPath.split("/").pop()
            elPath = elPath.split("?")[0]
            document.getElementById("showPopImg2").src = element.src;
            // console.log(elPath)
            oldPic = '/getViolationImage/ParsingFiles*' + oriPicPth
            if (oriPicPth == "") {
                imgSrc = $('#showPopImg2').attr('src');
            } else {
                imgSrc = oldPic;
            }
            // 將原圖片設定到 Croppie 中
            croppie.bind({
                url: imgSrc,
            })
            // document.getElementById("imgPop2").style.display = "block";
        }

        $(document).ready(function() {
            // 初始化 Croppie
            croppie = new Croppie($('#croppieContainer')[0], {
                // dragMode: "crop",
                // preview: "#previewImg",
                enableZoom: true,
                viewport: {
                    width: 200,
                    height: 100
                },
                boundary: {
                    width: 800,
                    height: 400
                },
            });
            $('#croppieContainer').hide();
            $('#sizeBtn').hide();

            // 當裁切按鈕被點擊時
            $('#cropBtn').on('click', function() {
                $('#croppieContainer').show();
                $('#sizeBtn').show();
                // 取得原圖片的路徑
                let imgSrc = ""
                if (oldPic == "") {
                    imgSrc = $('#showPopImg2').attr('src');
                } else {
                    imgSrc = oldPic;
                }
                // 將原圖片設定到 Croppie 中
                croppie.bind({
                    url: imgSrc,
                }).then(() => {
                    // 彈出裁切 modal
                    $('#cropModal').show();

                }, function(err) {
                    console.log(err);
                    return false;
                });
                $('#showPopImg2').hide();

            });

            // 當放大倍數按鈕被點擊時
            // $('.zoomBtn').on('click', function() {
            //     // 取得放大倍數
            //     var zoomValue = parseFloat($(this).data('zoom'));

            //     // 設定 Croppie 的放大倍數
            //     croppie.setZoom(zoomValue);
            // });

            // 當確認按鈕被點擊時
            $('#confirmBtn').on('click', function() {
                position = $('input[name="cut_position"]:checked').val()
                $('#img-pop-modal').css('visibility', 'hidden');
                // loaging
                Swal.fire({
                    icon: 'info',
                    title: '車牌放大中',
                    text: '請稍後...',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    allowEnterKey: false,
                    showConfirmButton: false,
                    onOpen: () => {
                        Swal.showLoading()
                    }
                });
                // 取得裁切後的圖片
                croppie.result('base64').then(function(croppedImg) {
                    $.ajax({
                        url: '/api/overspeedred/mergepic',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            path: elPath,
                            image: croppedImg,
                            position: position
                        },
                        success: function(response) {

                            document.getElementById("showPopImg2").src =
                                `${response.path}?time=${new Date()}`;

                            Swal.fire({
                                icon: 'success',
                                title: '車牌放大完成'
                            }).then(() => {
                                $('#img-pop-modal').css('visibility',
                                    'visible');
                            });
                            // 在這裡處理後端回傳的結果
                            // console.log(response.path);
                        },
                        error: function(xhr, status, error) {
                            // 在這裡處理錯誤
                            console.error(error);
                            $('#showPopImg2').show();
                        }
                    }).then(() => {
                        $('#showPopImg2').show();

                        violationparkingTable.ajax.reload(null, false);
                    });

                    // 隱藏裁切 modal
                    $('#cropModal').hide();

                });
                $('#croppieContainer').hide();
                $('#sizeBtn').hide();
            });
        });
    </script>
@stop
<div class="modal fade" id="imgPop2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content" id='img-pop-modal'>
            <div class="modal-body">
                <div class="col-12">
                    <div id="croppieContainer"></div>
                    <div id="sizeBtn">
                        <div>
                            <!-- 確認按鈕 -->

                            <!-- 位置按鈕 左下/右下 -->
                            <div class="text-right">
                                <span> 放大車牌放置:</span>
                                <input type="radio" name="cut_position" id="down_left" value="1" checked>
                                <label for="down_left">左下</label>
                                <input type="radio" name="cut_position" id="down_right" value="2">
                                <label for="down_right">右下</label>
                                <input type="radio" name="cut_position" id="top_left" value="3">
                                <label for="top_left">左上</label>
                                <input type="radio" name="cut_position" id="top_right" value="4">
                                <label for="top_right">右上</label>
                                <button class="btn btn-primary" id="confirmBtn">確定並放大</button>
                            </div>
                            <!-- 放大倍數按鈕 -->
                            {{-- <div>
                                <button class="zoomBtn" data-zoom="0.5">縮小</button>
                                <button class="zoomBtn" data-zoom="2">放大</button>
                            </div> --}}
                        </div>
                    </div>
                </div>
                {{-- <div class="col-4">
                    <div id="previewImg">

                    </div>
                </div> --}}

                <img id="showPopImg2" style="max-width:100%">
            </div>
            <div class="modal-footer">
                <!-- 裁切按鈕 -->
                <button id="cropBtn">車牌放大</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
            </div>
        </div>
    </div>
</div>