简体   繁体   中英

How to convert pixel value into scale? in Javascript or jquery

I Have to create page width in zoom operation

So I have few options

<select id="scaleSelect" class="scale selectpicker" title="Zoom" onchange="zoomval();">
<option title="" value="I have to convert the page width to scale value"  id="page_fit">Page Width</option>
          <option title="" value="0.5"  >50%</option>
          <option title="" value="0.75">75%</option>
          <option title="" value="1">100%</option>
          <option title="" value="1.25">125%</option>
          <option title="" value="1.5">150%</option>
          <option title="" value="2">200%</option>
          <option title="" value="3">300%</option>
          <!-- <option title="" value="4">400%</option> -->
          </select>

I have calculated screen width (1366px) , Now I have to convert in to scale and I have to use for page width option.

How can I able to do this?

function zoomval(){
  console.log("Value changing")
  var page_f_val = $('#page_fit').val();
  var page_fit = $("#scaleSelect").val();
  if(page_fit == page_f_val){
    console.log("Value Matched")
    $('#viewer > div').map(function() 
        {       
    console.log(this.id)
    var pagecontainter_val = document.getElementById(this.id)
    console.log(pagecontainter_val)
    $("#"+this.id).css({"width":"100%"});

            //  if($("#"+this.id+"  #pdf-annotate-edit-overlay").length > 0)
            //  {
            //   document.getElementById(this.id).removeChild(document.getElementById('pdf-annotate-edit-overlay'));
            //  }
        });
  }



}

You can zoom in or zoom out using css property

 var max = 2, min=0.5,curZoom = 1; function zoom(inc){ curZoom+=(inc*0.1); $("#zoomable").css('zoom',curZoom); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='zoomable'><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/wisconsin.svg"></div> <button onclick='zoom(1)'>Zoom In</button> <button onclick='zoom(-1)'>Zoom Out</button> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM