如何放大和缩小，使用JavaScript仅下载活动图像

Question

我正在使用JavaScript开发一个Web应用程序，该应用程序具有“放大”和“缩小”按钮，并且还将“下载按钮”结果下载到基于Id的本地空间中。尝试下面的代码下载，缩放按钮。

缩放功能不适用于每个活动图像，当我单击“下载”时，缩放功能将在新选项卡中打开，而不是“保存”。但是，“放大和缩小，下载”仅应基于使用JavaScript的ID才能工作。

Zoom Script Code

<script type="text/javascript">
            function zoomin(){
                var myImg = document.getElementById("map");
                var currWidth = myImg.clientWidth;
                if(currWidth == 2500) return false;
                 else{
                    myImg.style.width = (currWidth + 100) + "px";
                } 
            }
            function zoomout(){
                var myImg = document.getElementById("map");
                var currWidth = myImg.clientWidth;
                if(currWidth == 100) return false;
                 else{
                    myImg.style.width = (currWidth - 100) + "px";
                }
            }
        </script>

HTML Code

<div class="Top">
                                                <div class="One">
                                                        <button class="prev reverse"> <i class="fas fa-cut"></i> Clip </button>
                                                        <button> <a href="AddH.png" download="Iamges.png" target="_blank"> <i class="fas fa-download"></i> Download </a> </button>
                                                        <span class="Select-Text">Select Page :</span>
                                                        <button class="jump reverse" data-index="0">1</button>
                                                        <button class="jump" data-index="1"> 2</button>
                                                        <button class="jump" data-index="2"> 3</button>
                                                        <span id="Zoom">
                                                            <strong>Zoom Paper :</strong>
                                                            <button type="button" onclick="zoomin()"> <i class="fas fa-search-plus"></i> </button>                                                          <button type="button" onclick="zoomout()"> <i class="fas fa-search-minus"></i> </button>                                                        </span>                                             </div>                                      <div class="Two">                                                   <div class="box" id="box1">                                                     <div class="side side1 main">                                                           <!-- <input type="checkbox" id="zoomCheck">  -->                                                                <img id="map" src="images/AddV.png" class="Middle-Show-Image" />                                                        </div>                                                      <div class="side side2">                                                                <img id="map" src="images/AddH.png" class="Middle-Show-Image" />                                                </div>
<div class="side side3">                                                            <img id="map" src="images/AddV.png" class="Middle-Show-Image" /> 
                                                        </div>                                              </div>                                          </div>                                      </div>

Slider Script Code

<script>
            // Horizontal
            $('#box1').flipbox({
                vertical: false
            });


            // Clock
            $('.clock .box').flipbox({
                vertical: true
            });
            // Buttons
            $('button.prev').click(function() {
                $(this).closest('.item').find('.box').flipbox('prev', $(this).hasClass('reverse'));
            });
            $('button.next').click(function() {
                $(this).closest('.item').find('.box').flipbox('next', $(this).hasClass('reverse'));
            });
            $('button.jump').click(function() {
                $(this).closest('.item').find('.box').flipbox('jump', $(this).data('index'), $(this).hasClass('reverse'));
            });
            $('button.config').click(function() {
                $(this).closest('.item').find('.box')
                    .flipbox({
                        animationDuration: $(this).data('duration'),
                        animationEasing: $(this).data('easing')
                    })
                    .flipbox('next');
            });
        </script>