javascript create large size image cause display issue

Question

I use javascript to read an large image and append to the document, the image is vertical, with the size of 3024 * 4032:

here was my code:

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'

but the console.log was output:

width: 4032 height: 3024

and the image display horizontal:

Does anyone met this? and how can I fix it? Thanks!

you could try this https://nsulistiyawan.github.io/2016/07/11/Fix-image-orientation-with-Javascript.html — gauravmuk, Jun 16 '17 at 11:20
It's not a problem with the image size. Most likely the image includes some rotation information - the macOS file browser handles it and rotates the image, while your code doesn't. Not sure if it's possible to read this metadata with JS. — laurent, Jun 16 '17 at 11:20
It's probably the EXIF property that is affecting your image. Here's a similar question: https://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side — Niklas, Jun 16 '17 at 11:30
@this.lau_ , thank you for your description, the photo took from my iphone, now I know what's the problem. — Jacket Chen, Jun 16 '17 at 13:55

score 2 · Answer 1 · answered Jun 16 '17 at 11:27

2

You can rotate your image:

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 = 'https://i.stack.imgur.com/OeGAY.png'

answered Jun 16 '17 at 11:27

Aliaksandr Pitkevich

834
8
25

Won't that also rotate pictures that don't need to be rotated? (presumably he needs his program to work with more than just one picture) – laurent Jun 16 '17 at 13:56
thanks for the answer, I fixed it by using this library: https://github.com/blueimp/JavaScript-Load-Image – Jacket Chen Jun 16 '17 at 14:10

score 0 · Answer 2 · answered Jun 16 '17 at 11:26

0

You can either change the image's meta information so the browser displays it in the correct orientation, or use CSS transform to rotate the image.

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

Obviously you should give the image a class so it doesn't rotate every image on the page.

answered Jun 16 '17 at 11:26

Paul Redmond

3,276
4
32
52

thanks for the answer, I fixed it by using this library: https://github.com/blueimp/JavaScript-Load-Image – Jacket Chen Jun 16 '17 at 14:10

score 0 · Accepted Answer · answered Jun 16 '17 at 14:04

Thanks for the answer from @jonLuci , this library fixed my issue: https://github.com/blueimp/JavaScript-Load-Image

and I update my code as bellow:

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

and it's working:

Look like this

javascript create large size image cause display issue

3 Answers3