自适应显示图片高度和宽度

标签：const containerWidth height 适应 width 宽度 fitHeight 图片 size

file.previewPath就是图片路径

  this.getImageSizeFromBlobUrl(file.previewPath)
        .then(size => {
          console.log('原图大小:', size.width, 'x', size.height);
          const screenWidth = window.innerWidth - 80;
          const screenHeight = window.innerHeight - 80;
          // const { width, height } =
          this.originalSize = this.calculateFitSize(size.width, size.height, screenWidth, screenHeight);
          console.log('换算大小：', this.originalSize);
          this.cropperModel = true;
        })
        .catch(error => {
          console.error('获取原图大小失败:', error);
        });

   // 获取原图大小     getImageSizeFromBlobUrl(blobUrl) {       return new Promise((resolve, reject) => {         const img = new Image();
        img.onload = function() {           // 在图像加载完成后获取其自然宽度和高度           const { naturalWidth } = this;           const { naturalHeight } = this;           resolve({ width: naturalWidth, height: naturalHeight });         };
        img.onerror = function() {           reject(new Error('Failed to load image'));         };
        // 设置 Image 对象的 src 属性为 Blob URL         img.src = blobUrl;       });     },

　　

   

// 自适应显示图片高度和宽度
    calculateFitSize(imageWidth, imageHeight, containerWidth, containerHeight) {
      const imageAspectRatio = imageWidth / imageHeight;
      const containerAspectRatio = containerWidth / containerHeight;
      let fitWidth, fitHeight;
      if (imageAspectRatio > containerAspectRatio) {
        // 图片的宽高比例大于容器的宽高比例，按照容器的宽度进行缩放
        fitWidth = containerWidth;
        fitHeight = containerWidth / imageAspectRatio;
      } else {
        // 图片的宽高比例小于等于容器的宽高比例，按照容器的高度进行缩放
        fitHeight = containerHeight;
        fitWidth = containerHeight * imageAspectRatio;
      }

      return { width: Math.round(fitWidth), height: Math.round(fitHeight) };
    }

　　

标签：const,containerWidth,height,适应,width,宽度,fitHeight,图片,size
From： https://www.cnblogs.com/ht955/p/18145237