Javascript图像预览总是在横向模式错误

Javascript image preview always in landscape mode bug

本文关键字：横向 模式 错误 图像 Javascript      更新时间：2023-09-26

我试图在上传之前动态预览javascript中的图像，所以我从这里得到了这个代码:在上传之前预览图像

<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>

它工作得很好，但是当我加载肖像格式的图片时，它会自动旋转并将其设置为横向。我怎样才能避免这种情况发生呢?

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

您可能遇到图像的EXIF方向问题，浏览器不支持该问题。

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

再试一下你的脚本，它应该可以工作。

如果没有，请尝试使用其他图像(在Web上找到的肖像图像)。

对于firefox，您可以使用image-orientation

img {
    image-orientation: from-image;
}

你也可以使用这个库:

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

相关文章：