实景图等比缩放适应在固定宽高内

hanbaoshan

2020-12-24 b92fdd535cf66641422ba84fe2d86952f0318248

 src/pages/panoramicView/components/LabelMark.vue

@@ -126,14 +126,18 @@
              :on-change="onChange"
              :show-file-list="false"
            >
              <el-image
              <!-- <el-image
                class="preview"
                v-if="panoramaPath"
                :src="panoramaPath"
                fit="contain"
                @mousemove="showCurPos"
                @mouseout="isShowCurPos=false"
              ></el-image>
              ></el-image>-->
              <div class="img-wrap" v-if="panoramaPath" :style="{width:fixedW+'px',height:fixedH+'px'}">
                <img v-if="panoramaPath" :style="{width:imgW+'px',height:imgH+'px'}" :src="panoramaPath" @mousemove="showCurPos" @mouseout="isShowCurPos=false">
              </div>

              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
@@ -200,6 +204,10 @@
      snapshot_url: '',
      panoramaPath: '',
      cameraData: [],
      fixedW: 960,
      fixedH: 540,
      imgW: 0,
      imgH: 0,
      traceX: 0,
      traceY: 0,
      isShowCurPos: false,
@@ -302,7 +310,16 @@
    getPanorama () {
      let _this = this;
      getPanoramaPic().then(res => {
        _this.panoramaPath = res.data.panoramaPath
        //判断长宽比
        let ratio = res.data.width/res.data.height;
        if(ratio > (_this.fixedW/_this.fixedH)){
          _this.imgW = _this.fixedW;
          _this.imgH = _this.imgW*res.data.height/res.data.width;
        }else{
          _this.imgH = _this.fixedH;
          _this.imgW = res.data.width*_this.imgH/res.data.height;
        }
        _this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
      })
    },
    showCurPos (e) {
@@ -324,16 +341,12 @@
      let param = new FormData();
      param.append('file', params.file)
      putPanoramaPic(param).then(res => {
        _this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
        debugger
        //_this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
        _this.getPanorama()
        _this.$parent.$refs['tracePlot'] && _this.$parent.$refs['tracePlot'].getPanorama();
      })
      // let fileReader = new FileReader()
      // fileReader.onload = () => {
      //   _this.file = fileReader.result;
      // }
      // if (_file) {
      //   fileReader.readAsDataURL(_file)
      // }

    },

    bindListen (e) {