打印 调整图片清晰度

[sailei1]

<div class="page">
        <blockquote>图1：</blockquote>
        <div class="img-container img-1" >
            <img src="..."/>
        </div>
        <p class="btns">    
           <a class="btn" onClick="zoomOut('img-1')">放大</a>
           <a class="btn" onClick="zoomIn('img-1')">缩小</a>  
           <a class="btn" onClick="rotate2('img-1')">左转</a> 
           <a class="btn" onClick="rotate('img-1')">右转</a>  
           <a class="btn" onClick="reset('img-1')">还原</a> 
         </p>

        <blockquote>图2 ：</blockquote>
         <div class="img-container img-2">
          <img src="..." />
            </div>
          <p class="btns">  
            <a class="btn" onClick="zoomOut('img-2')">放大</a> 
            <a class="btn" onClick="zoomIn('img-2')">缩小</a>
            <a class="btn" onClick="rotate2('img-2')">左转</a>
             <a class="btn" onClick="rotate('img-2')">右转</a> 
             <a class="btn" onClick="reset('img-2')">还原</a>  
            </p>
</div>

css

.page{
         page-break-after: always;
         height:1100px;
         overflow:hidden;
         /*border:1px solid red;*/

     }
     .page:last-child {
         page-break-after: auto;
     }

 @media print {
         .btn{
             display:none;
         }
         .img-container{
             overflow:hidden;
         }
         .img-container ::-webkit-scrollbar {
             background: transparent;
             width: 0 !important;
         }
     }

js

//https://github.com/visionmedia/move.js

       function getRect(el) {
           if (el instanceof window.SVGElement) {
               let rect = el.getBoundingClientRect()
               return {
                   top: rect.top,
                   left: rect.left,
                   width: rect.width,
                   height: rect.height
               }
           } else {
               return {
                   top: el.offsetTop,
                   left: el.offsetLeft,
                   width: el.offsetWidth,
                   height: el.offsetHeight
               }
           }
       }
       function hide(selector){
           var s='.'+selector;
           var el=document.querySelector(s);
           el.setAttribute('style','display:none;');
       }

       function getData(el, name, val) {
           let prefix = 'data-'
           if (val||val===0) {
               return el.setAttribute(prefix + name, val)
           }
           return el.getAttribute(prefix + name)
       }
       function zoomOut(selector){
           var s='.'+selector+' img';
           var el=document.querySelector(s);
           setPadding(el,10);

           var scale=  parseFloat(getData(el,'scale')||1)+0.1;
           var rotate=parseFloat(getData(el,'rotate')||0)

           move(s).rotate(rotate).scale(scale).end();
           getData(el,'scale',scale);

       }
       function setPadding(el,p){
           var padding = parseInt(getData(el, 'padding') || 0) + p;
           if(p==0){
               el.setAttribute('style','padding:0');
               padding=0;
           }else {
               el.setAttribute('style', 'padding:' + padding + '%;');
           }
           getData(el, 'padding', padding);
       }

       function zoomIn(selector){
           var s='.'+selector+' img';
           var el=document.querySelector(s);
           setPadding(el,-10);

           var scale=  parseFloat(getData(el,'scale')||1)-0.1;
           var rotate=parseFloat(getData(el,'rotate')||0)

           move(s).rotate(rotate).scale(scale).end();
           getData(el,'scale',scale);

       }
       function  rotate(selector){
           var s='.'+selector+' img';
           var el=document.querySelector(s);
           debugger;
           // setPadding(el,10);
           var scale=  parseFloat(getData(el,'scale')||1);
           var rotate=parseInt(getData(el,'rotate')||0)+90;
           move(s).rotate(rotate).end();
           getData(el,'rotate',rotate);

       }
       function  rotate2(selector){
           var s='.'+selector+' img';
           var el=document.querySelector(s);
           debugger;
           // setPadding(el,10);
           var scale=  parseFloat(getData(el,'scale')||1);
           var rotate=parseInt(getData(el,'rotate')||0)-90;
           move(s).rotate(rotate).end();
           getData(el,'rotate',rotate);

       }
       function reset(selector){
           var s='.'+selector+' img';
           var el=document.querySelector(s);
           setPadding(el,0);
           move(s).scale(1).rotate(0).end();
           getData(el,'scale',1);
           getData(el,'rotate',0);

       }