php - Vuejs计算图像纵横比

Question

大家好，我需要一些帮助来计算像素纵横比纵横比是输入的宽度和高度。我有这个，但不知道怎么做。

   <?php ob_start();
session_start();

include('head.php');
include('header.php');
?>
    <div id="signUpFormContainer">
  <div id="signUpForm">
      <h2>Add A Display</h2>
      <!--Display Name -->
    <div class="inputDiv">
      <p v-show="validName==true && nameexists==false">Display Name* <i class="fa fa-check-circle success"></i> Valid</p>
      <p v-show="validName==false && sub=='1' && nameexists==false">Display Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter a display name</span></i></p>
        <p v-show='validName==false && sub!="1" && nameexists==false'>Display Name* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter a display name</span></i></p>
        <p v-show='sub=="1" && nameexists==true'>Display Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Display Name Already Exists</span></i></p>
        <p v-show='sub=="1" && nameexists==true'>Display Name Already Exists</p>
        <input v-model="name" placeholder="Display Name" v-on:focus="shownamerequirements">
        <ul v-show='disnamer==true'>
        <li v-show="validName==false">Please enter a display name</li>
        </ul>
    </div>
      <!--END DISPLAY NAME -->

      <!--Width-->
      <div class="inputDiv">
        <p v-show="widthLength==true && widthHasNum==true && width!=''">Pixel Width* <i class="fa fa-check-circle success"></i> Valid</p>
        <p v-show="widthLength==false && width!='' || widthHasNum==false && width!='' || width=='' && sub==1">Pixel Width* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter a width. Width can contain only numbers</span></i></p>
        <p v-show="width=='' && sub==0">Pixel Width* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Width can contain only numbers</span></i></p>
        <input v-model="width" placeholder="Pixel Width" v-on:focus="showwidthrequirements" id="width">
        <ul v-show="diswidthr==true">
        <li v-show="widthLength==false">Please enter pixel width of your display</li>
        <li v-show="widthHasNum==false || width==''"> Width must contain only numbers</li>
        <li v-show="widthLength==false">Note: Pixel width is typically an even number</li>
        </ul>
      </div>
      <!-- End Width -->

      <!-- Height -->
            <div class="inputDiv">
        <p v-show="heightLength==true && heightHasNum==true && height!=''">Pixel Height* <i class="fa fa-check-circle success"></i> Valid</p>
        <p v-show="heightLength==false && height!='' || heightHasNum==false && height!='' || height=='' && sub==1">Pixel Height* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter a height. Height can contain only numbers</span></i></p>
        <p v-show="height=='' && sub==0">Pixel Height* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Height can contain only numbers</span></i></p>
        <input v-model="height" placeholder="Pixel Height" v-on:focus="showheightrequirements" id="height">
        <ul v-show="disheightr==true">
        <li v-show="heightLength==false">Please enter the pixel height of your display</li>
        <li v-show="heightHasNum==false || height==''"> Height must contain only numbers</li>
        <li v-show="heightLength==false">Note: Pixel height is typically an even number</li>
        </ul>
      </div>

      <!-- End Height -->

      <!--Aspect Ratio -->
<p v-show="sub==1 && aspectratio!=''">{{aspectratio}}</p>
      <!--End Aspect Ratio -->

      <!-- File Format -->
      <div class="inputDiv">
      <p v-show="fileformat!=''">File Format* <i class="fa fa-check-circle success"></i> Valid</p>
      <p v-show="fileformat=='' && sub==1">File Format* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please select your default file format</span></i></p>
      <p v-show="fileformat=='' && sub!=1">File Format* <i  class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please select your default file format</span></i></p>
      <select v-model="fileformat" id="fileformat">
      <option disabled value="">Please select a default file format</option>
      <option value="wmv">WMV</option>
      <option value="mp4">MP4</option>
      <option value="jpg">JPG</option>
      </select>
      </div>
      <!-- End File Format-->
        <div class="inputButton">
      <input v-on:click="addDisplay" id="addButton" type="button" value="Add Display"></input>
    </div>
  </div>
<div id="footerContainer"></div>
</div>
<script>
var app = new Vue({
  el: '#signUpForm',
  data: {
   name: '',
    width: '',
    height: '',
    sub: '',
    disnamer: '',
    diswidthr: '',
    disheightr: '',
    nameexists:'',
    aspectratio:'',
    fileformat:''
  },
  computed: {
      widthLength: function() {
        this.width=this.width.replace(/\s/g, '');
      if(this.width.trim().length >= 1) {
        return true;
      } else {
        return false;
      }
    },
      heightLength: function() {
        this.height=this.height.replace(/\s/g, '');
      if(this.height.trim().length >= 1) {
        return true;
      } else {
        return false;
      }
    },
    widthHasNum: function(){
         this.width=this.width.replace(/[^0-9]+/g, '');
      if(/[\d]/.test(this.width)){return true;} else{return false;}  
    },
    heightHasNum: function(){
         this.height=this.height.replace(/[^0-9]+/g, '');
      if(/[\d]/.test(this.height)){return true;} else{return false;}  
    },
    validName: function(){
    this.name=this.name.replace(/\s/g, '');
      if(this.name.trim().length >= 1) {
        return true;
      } else {
        return false;
      }
    }
  },
  created: function() {
      this.nameexists=false;
  },
  watch: {
  },
  methods: {
    addDisplay: function() {
        this.sub=1;
        if(this.width!='' && this.height!=''){
        this.aspectratio=this.width/this.height;}
      if(this.widthLength && this.widthHasNum && this.heightLength && this.heightHasNum && this.validName && this.fileformat!='') {
        var jsonString = JSON.stringify({
          name: this.name,
          width: this.width,
          height: this.height,
          fileformat: this.fileformat
        });
        $.ajax({
          url: 'addDisplayBackend.php',
          dataType: 'json',
          type: 'post',
          contentType: 'application/json',
          dataType: 'json',
          data: jsonString,
            error: function(data){
              alert('error');
//                window.location.href='successfullycreated.php';
            },
          success: function(data){
            console.log(data);
              alert('success');
              this.userexist=data.userexist;
              if(this.nameexist==false){window.location.href='addeddisplay.php';}
          }.bind(this)
        });
    }
    },
    shownamerequirements: function(){
      this.sub=0;
      this.disnamer=true;
      this.diswidthr=false;
      this.disheightr=false;
    },
      showheightrequirements: function(){
      this.sub=0;
      this.diswidthr=false;
      this.disheightr=true;
      this.disnamer=false;
      },
      showwidthrequirements: function(){
          this.sub=0;
          this.diswidthr=true;
          this.disheightr=false;
          this.disnamer=false;
      }
    }
  });

</script>
<?php include('foot.php');?>

标签： phpvuejs2aspect-ratio