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

Question

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

并且图像水平显示:

有没有人遇到过这个？我该如何解决？谢谢!

Answer 1

您可以旋转图像:

let image = new Image()
image.onload = function (e) {
    let width = image.width;
    let height = image.height;
    document.body.appendChild(image);
    let el = e ? e.target : window.event.srcElement;
    el.style.transform = 'rotate(+90deg)';
    console.log('width: ' + width, 'height: ' + height)
}
image.src = '/image/OeGAY.png'