Zoom Pan and Print Image in JavaScript

Last Reply one year ago By pandeyism

Posted one year ago

Hi guys i have image which will zoom but not able pan the image. and when i print the image nothing gets printed. it ll be blank.please help

    <script type="text/javascript">
        var currentZoom = 1.0;
        $(document).ready(function () {
            $('#zoomin').click(function () {
                currentZoom = currentZoom + 0.01;
                var scaleString = "scale(" + currentZoom + ")";
                $('#divName').css("transform", scaleString);
               // $('#divName1').css("transform", scaleString);
            })
            $('#zoomout').click(function () {
                currentZoom = currentZoom - 0.01;
                var scaleString = "scale(" + currentZoom + ")";
                $('#divName').css("transform", scaleString);
               // $('#divName1').css("transform", scaleString);
            })
        });
        function ImageReturne() {
            var div = document.getElementById("one").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() {
            debugger;
            Pagelink = "about:blank";
            var pwa = window.open(Pagelink, "_new");
            pwa.document.open();
            pwa.document.write(ImageReturne());
            pwa.document.close();
        }
    </script>

 

<nav class="navbar-fixed-top navbar-default">
    <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" onclick="myprint()"> <span class="glyphicon glyphicon-print"></span> Print</button>
</nav>
<div id="one" style="text-align: center;">
    <div class="wrapper">
        <div id="divName">
            <img src="VERTICAL_FIN_INSTALLATION_(SHEET_1_OF_10).jpg" alt="VERTICAL_FIN_INSTALLATION_(SHEET_1_OF_10).jpg" id="image0" usemap="#image0Map" class="mapimg" />
        </div>
    </div>
</div>

 

You are viewing reply posted by: pandeyism one year ago.
Posted one year ago

Hi suhaas121,

Please refer below sample.

HTML

<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="myprint()">
    <span class="glyphicon glyphicon-print"></span>Print</button>
<button type="button" onclick="document.location.reload(true);" value="Reload Page">
    <span class="glyphicon glyphicon-repeat"></span>Reset</button>
<div id="scroll">
    <div id="divName">
        <img class="blue" src="http://www.wired.com/images_blogs/photos/uncategorized/2008/03/04/puppy.jpg" />
    </div>
</div>
<style type="text/css">
    #scroll
    {
        width: 100%;
        height: 800px;
        overflow: hidden;
    }
        
    .blue
    {
        width: 1800px;
        height: 1800px;
    }
</style>
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<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>

Demo