javascript创建大尺寸图像导致显示问题

我使用javascript读取一个大图像并附加到文档中，图像是垂直的，大小为3024*4032：

这是我的密码：

var image = new Image()
image.onload = function () {
  var width = image.width
  var height = image.height
  document.body.appendChild(image)
  console.log('width: ' + width, 'height: ' + height)
}
image.src = 'images/01vertical.jpg'

但是输出了console.log：

width: 4032 height: 3024

图像水平显示：

---

有人见过这个吗？我怎样才能修好它？谢谢

您可以更改图像的元信息，以便浏览器以正确的方向显示它，或者使用CSS

transform

旋转图像

img{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

---

显然，您应该为图像指定一个类，这样它就不会旋转页面上的每个图像。

您可以旋转图像：

let image=new image（）
image.onload=函数（e）{
让宽度=image.width；
让高度=image.height；
document.body.appendChild（图像）；
设el=e？e.target:window.event.src元素；
el.style.transform='旋转（+90度）'；
console.log（'宽度：'+宽度，'高度：'+高度）
}
image.src=https://i.stack.imgur.com/OeGAY.png“

谢谢@jonLuci的回答，这个库修复了我的问题：

我更新代码如下：

var imageUrl = 'images/01vertical.jpg'
loadImage(
  imageUrl,
  function (img) {
    if (img.type === 'error') {
      console.log('Error loading image ' + imageUrl)
    } else {
      document.body.appendChild(img)
    }
  },
  { 
    maxWidth: 300,
    orientation: true
  }
)

它正在发挥作用：

---

您可以试试这个，图像大小没有问题。图像很可能包含一些旋转信息-macOS文件浏览器处理它并旋转图像，而您的代码不处理。不确定是否可以用JS读取此元数据。可能是EXIF属性影响了您的图像。这里有一个类似的问题：@jonluci，谢谢你的回答，它对我很有用。@this.lau，谢谢你的描述，这张照片是从我的iphone上拍摄的，现在我知道问题出在哪里了。这不也会旋转不需要旋转的图片吗？（大概他需要他的程序处理不止一张图片）谢谢你的答案，我用这个库修复了它：谢谢你的答案，我用这个库修复了它：