Zoom in, out and print the image

Imageviewer is very good package for zoom image. you can install it from Nuget package

npm install imageviewer

It Provides functionality like to zoom in , Zoom Out, Rotate the image.  you can even play in slide view. but does not provide print functionality.

To implement Print functionality requires some changes in Viewer.js and viewer.css

Changes of Viewer.Js

1) In Viewer.TEMPLATE  add one li after flip-vertical.


 '<li class="viewer-flip-vertical" data-action="flip-vertical"></li>' +
            '<li class="viewer-print" data-action="print"></li>' +

2) On click: function (e)  Add another case print below flip-vertical

               case 'flip-vertical':
                    this.scaleY(-image.scaleY || -1);
                    break;

                case 'print':
                    this.printDiv();
               
                    break;

3) Add function in js.

        printDiv: function()
        {
            $('.viewer-canvas').print();
        },


Viewer.css change

.viewer-print {
    background: url(/Content/images/print.png) no-repeat;
    background-size: 11px !important;
    background-position: center;
}

.viewer-toolbar {
 width: 315px;
}