html2Canvas不支持object-fit属性导致图片变形了

html2Canvas是不支持object-fit属性

 <div class="snapshotPage_left">
      <img :src="xxx" alt="" :style="leftImageStyle" />
    </div>
  data() {
    return {
      leftImageStyle: {
        position: 'absolute',
        width: '1952px',
        height: '3600px',
        left: '0',
        top: '0'
      }
    };
  },
 mounted() {
    this.$nextTick(() => {
      this.calculateImageDimensions();
    });
  },
 
 calculateImageDimensions() {
      const container = { width: 1952, height: 3600 };
      const img = new Image();
      img.src = xxx;
      
      img.onload = () => {
        const imgRatio = img.naturalWidth / img.naturalHeight;
        const containerRatio = container.width / container.height;
        
        let width, height, left, top;
        
        if (imgRatio > containerRatio) {
          // 图片更宽,以高度为准
          height = container.height;
          width = height * imgRatio;
          top = 0;
          left = (container.width - width) / 2;
        } else {
          // 图片更高,以宽度为准
          width = container.width;
          height = width / imgRatio;
          left = 0;
          top = (container.height - height) / 2;
        }
        
        this.leftImageStyle = {
          position: 'absolute',
          width: width + 'px',
          height: height + 'px',
          left: left + 'px',
          top: top + 'px'
        };
       
      };
    },

  .snapshotPage_left {
    width: 1952px;
    height: 3600px;
    position: relative;
    overflow: hidden;
    img {
      position: absolute;
    }
  }

这样就可以了 不在依赖object-fit

你可能感兴趣的:(前端,css3)