locked
Print only the zoomed image RRS feed

  • Question

  • User-279766093 posted

    Hi i have an image. i want to print the image in zoomed condition. plz help

    <script type="text/javascript">
            var currentZoom = 1.0;
            $(document).ready(function () {
                $('#zoomin').click(function () {
                    currentZoom = currentZoom + 0.03;
                    var scaleString = "scale(" + currentZoom + ")";
                    $('#divName').css("transform", scaleString);
                })
                $('#zoomout').click(function () {
                    currentZoom = currentZoom - 0.03;
                    var scaleString = "scale(" + currentZoom + ")";
                    $('#divName').css("transform", scaleString);
                })
            });
            function ImageReturne() {
                var div = document.getElementById("scroll").innerHTML;
                var firstFunc = function step1() { setTimeout('step2()', 10); }
                var secondFunc = function step2() { window.print(); window.close() }
                var getImages = "<html><head><script>\n" + firstFunc + "\n" + secondFunc + "</scri" + "pt></head><body onload='step1()'>\n" + "'" + div + "" + "</body></html>";
                return getImages;
            }
            function myprint() {
                Pagelink = "about:blank";
                var pwa = window.open(Pagelink, "_new");
                pwa.document.open();
                pwa.document.write(ImageReturne());
                pwa.document.close();
            }
            $(function () {
                var clicking = false;
                var previousX;
                var previousY;
                $("#scroll").mousedown(function (e) {
                    e.preventDefault();
                    previousX = e.clientX;
                    previousY = e.clientY;
                    clicking = true;
                });
                $(document).mouseup(function () {
                    clicking = false;
                });
                $("#scroll").mousemove(function (e) {
                    if (clicking) {
                        e.preventDefault();
                        var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
                        var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
                        $("#scroll").scrollLeft($("#scroll").scrollLeft() + (previousX - e.clientX));
                        $("#scroll").scrollTop($("#scroll").scrollTop() + (previousY - e.clientY));
                        previousX = e.clientX;
                        previousY = e.clientY;
                    }
                });
                $("#scroll").mouseleave(function (e) {
                    clicking = false;
                });
            });
    </script>
    
    
    
          <button type="button" id="zoomin"> <span class="glyphicon glyphicon-zoom-in"></span> Zoom In</button>
        <button type="button" id="zoomout"> <span class="glyphicon glyphicon-zoom-out"></span> Zoom Out</button>
         <button type="button" onclick="document.location.reload(true);" value="Reload Page"> <span class="glyphicon glyphicon-repeat"></span> Reset</button>
                 <button type="button" id="Pic"  onclick="myprint()"> <span class="glyphicon glyphicon-print"></span> Print</button> 	 
                 
         <div id="scroll">
                    <div id="divName" style="margin-left:50px;margin-top:80px">
            <img alt="" src="DEBEL-I4-A-35-10-10-10-OBOGS-TEJAS-00011-K.jpg" class="mapimg" usemap="#Map" id="Img1"/>
             </div>
                    </div>

    Saturday, March 2, 2019 6:41 AM

Answers

  • User839733648 posted

    Hi suhaas121,

    I've tested your code on my side and it seems works well.

    You could see from the following screenshot that when you zoomed in or out the image the print result is consistent.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 4, 2019 2:14 AM