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

@section('css')
    @parent
    <style>
        .modal-xl {
            max-width: 1140px;
            margin-left:10%;
        }

    </style>
@stop

@section('js')
    @parent
    <script>
        function downloadPic(link){

        }
        function imagePopUp(element) {
            // document.getElementById("showPopImg2").src = element.src.replace(/getSmallImage/gi, 'getViolationImage');
             
            src = element.src.replace(/getSmallImage/gi, 'getViolationImage');
            document.getElementById("download_pic").href = src;
            // document.getElementById("download_pic").download = src.split('*')[src.split('*').length-1];
            // 如果 src 有? 就取?前面的字串
            if(src.indexOf('?') != -1){
                src = src.split('?')[0];
                document.getElementById("download_pic").download = src.split('/')[src.split('/').length-1];
            }
            else{
                document.getElementById("download_pic").download = src.split('*')[src.split('*').length-1];
            }            

            img = document.getElementById("showPopImg");
            img.style.backgroundPositionX = 0;
            img.style.backgroundPositionY = 0;
            img.style.width = 1920 + 'px';
            img.style.height = 673 + 'px';
            img.style.maxWidth = 100 + '%';
            img.style.maxHeight = 100 + '%';
            img.style.backgroundImage = `url('${src}')`;
            img.style.backgroundRepeat = "no-repeat";
            img.style.backgroundSize = "contain";
            // document.getElementById("imgPop").style.display = "block";
            AttachDragTo(img);
        }

        function zin() {
            img = document.getElementById("showPopImg");
            oldSize = img.style.backgroundSize.split("%")[0]
            // console.log();
            if(oldSize == "contain"){
                oldSize = 100;
            }                
            img.style.backgroundSize = parseInt(oldSize)+100+"%";
            
            // img.style.width = 300+'%';
            // img.style.height = 300+'%';
            // img.style.maxWidth = 300+'%';
        }

        function zout() {
            img = document.getElementById("showPopImg");
            oldSize = img.style.backgroundSize.split("%")[0]
            // console.log();
            if(oldSize == "contain"){
                oldSize = 0;
            }                
            if(parseInt(oldSize)-100 <0){
                img.style.backgroundSize = "contain";
            }else{
                img.style.backgroundSize = parseInt(oldSize)-100+"%";
            }
            

            // img.style.backgroundSize = "contain";
            // img.style.width = 100+'%';
            // img.style.height = 100+'%';
            // img.style.maxWidth = 100+'%';
            
        }
        var AttachDragTo = (function() {
            var _AttachDragTo = function(el) {
                this.el = el;
                this.mouse_is_down = false;

                this.init();
            };

            _AttachDragTo.prototype = {
                onMousemove: function(e) {
                    if (!this.mouse_is_down) return;
                    var tg = e.target,
                        x = e.clientX,
                        y = e.clientY;

                    tg.style.backgroundPositionX = x - this.origin_x + this.origin_bg_pos_x + 'px';
                    tg.style.backgroundPositionY = y - this.origin_y + this.origin_bg_pos_y + 'px';
                },

                onMousedown: function(e) {
                    this.mouse_is_down = true;
                    this.origin_x = e.clientX;
                    this.origin_y = e.clientY;
                },

                onMouseup: function(e) {
                    var tg = e.target,
                        styles = getComputedStyle(tg);

                    this.mouse_is_down = false;
                    this.origin_bg_pos_x = parseInt(styles.getPropertyValue('background-position-x'), 10);
                    this.origin_bg_pos_y = parseInt(styles.getPropertyValue('background-position-y'), 10);
                },

                init: function() {
                    var styles = getComputedStyle(this.el);
                    this.origin_bg_pos_x = parseInt(styles.getPropertyValue('background-position-x'), 10);
                    this.origin_bg_pos_y = parseInt(styles.getPropertyValue('background-position-y'), 10);

                    //attach events
                    this.el.addEventListener('mousedown', this.onMousedown.bind(this), false);
                    this.el.addEventListener('mouseup', this.onMouseup.bind(this), false);
                    this.el.addEventListener('mousemove', this.onMousemove.bind(this), false);
                }
            };

            return function(el) {
                new _AttachDragTo(el);
            };
        })();
       
    </script>

@stop
<!-- Modal -->
<div class="modal fade" id="imgPop" 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">
            {{-- <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div> --}}
            <div class="modal-body">
                {{-- <img id="showPopImg2" style="max-width:100%; display:none;"> --}}
                <div id='showPopImg' onmousedown="AttachDragTo()"></div>
            </div>
            <div class="modal-footer">
                <a id="download_pic" class="btn btn-primary" href="" download>下載</a>
                
                <button type="button" onclick="zin()" class="btn btn-primary">放大</button>
                <button type="button" onclick="zout()" class="btn btn-primary">縮小</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{{-- <div id="imgPop" class="modal" onclick="this.style.display='none'">
    <span class="close">&times;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <div class="modal-content">
        <img id="showPopImg" style="max-width:100%">
    </div>
</div> --}}