search

blueimp / JavaScript-Load-Image

Load images provided as File or Blob objects or via URL. Retrieve an optionally scaled, cropped or rotated HTML img or canvas element. Use methods to parse image metadata to extract IPTC and Exif tags as well as embedded thumbnail images, to overwrite the Exif Orientation value and to restore the complete image header after resizing.
https://blueimp.github.io/JavaScript-Load-Image/
MIT License
4.45k stars 922 forks source link

aspectRatio depending on image orientation #138

Closed DJWassink closed 3 years ago

DJWassink commented 3 years ago

I was wondering if its possible to crop an image by a certain aspectRatio depending on the fact if an image is made in portrait or in landscape mode.

For example in landscape we might want 16/9 but in portrait maybe 2/3.

Currently this is possible by first loading the image once and checking the width/height and depending on that set the aspectRatio in a second loadImage. This however feels a bit odd and since the data is already know while applying the aspectRatio it could be nice to implement this in the library itself.

DJWassink commented 3 years ago

I did fork this repo and added my own (possible dirty) option to achieve what I need:

https://github.com/DJWassink/JavaScript-Load-Image/blob/master/js/load-image-scale.js#L77-L93

blueimp commented 3 years ago

Hi @DJWassink!

You don't have to modify the library or call loadImage twice to achieve this effect, as the scaling API already covers your use case:

loadImage(file).then(function (data) {
  if (data.originalWidth > data.originalHeight) {
    // landscape mode
    var scaledImage = loadImage.scale(data.image, { maxWidth: 600 })
    // ...
  } else {
    // portrait mode
    // ...
  }
})
DJWassink commented 3 years ago

Wow that's actually pretty smart! Thanks a ton!

I will see myself out now.