Javascript 图像预览始终处于横向模式错误

Question

我正在尝试在上传之前在 javascript 中预览图像，所以我从这里得到了这个代码：Preview an image before it is uploaded

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

它工作正常，但是当我加载纵向格式的图片时，它会自动旋转并将其设置为横向。我怎样才能防止这种情况发生？

Answer 1

它不会自动旋转图片。 当我测试它时，它向我展示了正确的图像和方向。

您的图像的 EXIF 方向可能存在浏览器无法识别的问题。

我建议您在 Photoshop 等图像编辑软件中打开图像，确保它是纵向的，然后以新名称保存。

再次尝试您的脚本，它应该可以工作。

如果没有，请尝试使用另一张图片（在网络上找到的肖像图片）。

Answer 2

对于火狐，你可以使用image-orientation

img {
    image-orientation: from-image;
}

你也可以使用this library:

JavaScript Load Image 是一个库，用于加载作为文件或 Blob 对象或通过 URL 提供的图像。它返回一个可选缩放和/或裁剪的 HTML img 或 canvas 元素。