Javascript - 当图像旋转时，它不会保持其比例/大小

编程问答 2022-05-15

问题描述

我刚刚开始学习 javascript、HTML5 和 CSS。我正在开发一个可以拍照、裁剪、旋转和下载的 PWA（渐进式网络应用）。

所以轮换正在起作用。然而，当我的图像旋转时，它不会保持他的比例/大小。

这是我的电脑的一个例子，当图像没有旋转和反向（工作正常）（它的原始尺寸是 1920x1080）：

enter image description here

enter image description here

当它垂直旋转时，它不会保持他的比例/大小。高度太多（我目前的问题）：

enter image description here

这就像图像正在重新调整其原始大小...我必须向下滚动才能看到图片的其余部分。如果图像高度太长，可能会很烦人。

有没有人知道如何在垂直旋转图像时保持相同的比例/大小？

我正在使用库来旋转我的图像，JavaScript-Load-Image

var format = "image/jpeg"
var jpegQuality = 0.4

/**
 * Rotate by left the picture when the button is tapped
 */
function rotateLeftButtonTapped() {
  document.getElementById('btn-rotate-left-photo').onclick = function() {
    loadImage(document.getElementById('pictureFromCamera').src,function(img) {
        var imgurl = img.toDataURL(format,jpegQuality)
        document.getElementById('pictureFromCamera').setAttribute("src",imgurl)
      },{
        orientation: 8
      } // Options
    )
  }
}

/**
 * Rotate by right the picture when the button is tapped
 */
function rotateRightButtonTapped() {
  document.getElementById('btn-rotate-right-photo').onclick = function() {
    loadImage(document.getElementById('pictureFromCamera').src,{
        orientation: 6
      } // Options
    )
  }
}
#pictureFromCamera {
  width: 100%;
  height: auto;
}

.figure-wrapper {
  display: block;
  position: relative;
  overflow: hidden;
}


/* Set the download button at the right bottom of the preview */

#btn-download-photo {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 16px;
  border-radius: 4px;
}


/* Set the remove button at the right top of the preview */

#btn-remove-photo {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 16px;
  border-radius: 4px;
}
<button class="w3-button w3-light-grey w3-padding-large w3-section" id="btn-rotate-left-photo">
      <i class="fa fa-rotate-left"></i>
    </button>

<button class="w3-button w3-light-grey w3-padding-large w3-section" id="btn-rotate-right-photo">
      <i class="fa fa-rotate-right"></i>
    </button>

<div class="figure-wrapper">
  <img id="pictureFromCamera" />
  <button id="btn-download-photo">
          <i class="fa fa-download"></i> Download
        </button>
  <button id="btn-remove-photo">
          <i class="fa fa-remove"></i> Delete
        </button>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlimageimageimageimage-resizingjavascript