IPhone XR , image from camera have width and height switched in javascriptHow do I remove a property from a JavaScript object?Remove empty elements from an array in JavascriptHow do I retrieve an HTML element's actual width and height?How to execute a JavaScript function when I have its name as a stringHow to get image size (height & width) using JavaScript?How do I remove a key from a JavaScript object?Getting image width on image load fails on IEHow do I remove a particular element from an array in JavaScript?Switch statement multiple cases in JavaScriptaccessing cache pictures phonegap
Can Russians naturally pronounce "попал в бесперспективняк"?
Single vs Multiple Try Catch
'spazieren' - walking in a silly and affected manner?
Can UV radiation be safe for the skin?
Is torque as fundamental a concept as force?
D Scale Question
Displaying Time in HH:MM Format
Should we run PBKDF2 for every plaintext to be protected or should we run PBKDF2 only once?
Squares inside a square
What are the electrical characteristics of a PC gameport?
New coworker has strange workplace requirements - how should I deal with them?
Tasha's Hideous Laughter used on a deaf person?
Can users with the same $HOME have separate bash histories?
How would a disabled person earn their living in a medieval-type town?
Received email from ISP saying one of my devices has malware
extending lines in 3d graph
Can my UK debt be collected because I have to return to US?
German equivalent to "going down the rabbit hole"
What is the motivation behind designing a control stick that does not move?
In Toy Story, are toys the only inanimate objects that become alive? And if so, why?
Are there consequences for not filing a DMCA (any country)
Function of the separated, individual solar cells on Telstar 1 and 2? Why were they "special"?
Would there be balance issues if I allowed opportunity attacks against any creature, not just hostile ones?
Why do fuses burn at a specific current?
IPhone XR , image from camera have width and height switched in javascript
How do I remove a property from a JavaScript object?Remove empty elements from an array in JavascriptHow do I retrieve an HTML element's actual width and height?How to execute a JavaScript function when I have its name as a stringHow to get image size (height & width) using JavaScript?How do I remove a key from a JavaScript object?Getting image width on image load fails on IEHow do I remove a particular element from an array in JavaScript?Switch statement multiple cases in JavaScriptaccessing cache pictures phonegap
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
So I seem to found out a weird behaviour when detecting image type (landscape / portrait) on IPhone XR image (heic format). It seems that javascript have the the image width and height switched. Is there any information about this behaviour? Or do you guys have any suggestion about what happen? The code detecting normal behaviour in any other image.
reader.onload = function (e)
const img = new Image()
img.src = e.target.result
img.onload = (f) =>
// nuxt,vue
that.$nextTick(() =>
const width = img.width
const height = img.height
console.log(img.width, img.naturalWidth, img.height, img.naturalHeight)
if (height > width)
that.imgType = 'portrait'
else
that.imgType = 'landscape'
console.log(that.imgType)
)
that.img = img
reader.readAsDataURL(this.$refs.fileUpload.files[0])
javascript iphone heic iphone-xr
asked Mar 28 at 1:04
Dimas SatrioDimas Satrio
12915 bronze badges
add a comment |
So I seem to found out a weird behaviour when detecting image type (landscape / portrait) on IPhone XR image (heic format). It seems that javascript have the the image width and height switched. Is there any information about this behaviour? Or do you guys have any suggestion about what happen? The code detecting normal behaviour in any other image.
reader.onload = function (e)
const img = new Image()
img.src = e.target.result
img.onload = (f) =>
// nuxt,vue
that.$nextTick(() =>
const width = img.width
const height = img.height
console.log(img.width, img.naturalWidth, img.height, img.naturalHeight)
if (height > width)
that.imgType = 'portrait'
else
that.imgType = 'landscape'
console.log(that.imgType)
)
that.img = img
reader.readAsDataURL(this.$refs.fileUpload.files[0])
javascript iphone heic iphone-xr
asked Mar 28 at 1:04
Dimas SatrioDimas Satrio
12915 bronze badges
add a comment |
So I seem to found out a weird behaviour when detecting image type (landscape / portrait) on IPhone XR image (heic format). It seems that javascript have the the image width and height switched. Is there any information about this behaviour? Or do you guys have any suggestion about what happen? The code detecting normal behaviour in any other image.
reader.onload = function (e)
const img = new Image()
img.src = e.target.result
img.onload = (f) =>
// nuxt,vue
that.$nextTick(() =>
const width = img.width
const height = img.height
console.log(img.width, img.naturalWidth, img.height, img.naturalHeight)
if (height > width)
that.imgType = 'portrait'
else
that.imgType = 'landscape'
console.log(that.imgType)
)
that.img = img
reader.readAsDataURL(this.$refs.fileUpload.files[0])
javascript iphone heic iphone-xr
asked Mar 28 at 1:04
Dimas SatrioDimas Satrio
12915 bronze badges
So I seem to found out a weird behaviour when detecting image type (landscape / portrait) on IPhone XR image (heic format). It seems that javascript have the the image width and height switched. Is there any information about this behaviour? Or do you guys have any suggestion about what happen? The code detecting normal behaviour in any other image.
reader.onload = function (e)
const img = new Image()
img.src = e.target.result
img.onload = (f) =>
// nuxt,vue
that.$nextTick(() =>
const width = img.width
const height = img.height
console.log(img.width, img.naturalWidth, img.height, img.naturalHeight)
if (height > width)
that.imgType = 'portrait'
else
that.imgType = 'landscape'
console.log(that.imgType)
)
that.img = img
reader.readAsDataURL(this.$refs.fileUpload.files[0])
javascript iphone heic iphone-xr
javascript iphone heic iphone-xr
asked Mar 28 at 1:04
Dimas SatrioDimas Satrio
12915 bronze badges
asked Mar 28 at 1:04
Dimas SatrioDimas Satrio
12915 bronze badges
asked Mar 28 at 1:04
Dimas SatrioDimas Satrio
12915 bronze badges
asked Mar 28 at 1:04
Dimas SatrioDimas Satrio
12915 bronze badges
asked Mar 28 at 1:04
Dimas SatrioDimas Satrio
12915 bronze badges
12915 bronze badges
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Actually the width and height are not switched, instead your portrait-image IS a landscape-image. The information that this landsccape-image has a portrait-orientation is saved within exif-data of the image-file. When you open the image on macOS, iOS or Windows it checks the exif-data and rotates the image on display so you will never notice it is actually saved as landscape.
To read out the exif-data in JavaScript you can use scripts like exif-js or exif-parser. Then you might rotate/calculate the rotation yourself by the given orientation-number:
Further informations about exif-orientation: https://github.com/bwindels/exif-parser
answered Apr 8 at 10:27
MickMick
2,9333 gold badges18 silver badges38 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55388699%2fiphone-xr-image-from-camera-have-width-and-height-switched-in-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Actually the width and height are not switched, instead your portrait-image IS a landscape-image. The information that this landsccape-image has a portrait-orientation is saved within exif-data of the image-file. When you open the image on macOS, iOS or Windows it checks the exif-data and rotates the image on display so you will never notice it is actually saved as landscape.
To read out the exif-data in JavaScript you can use scripts like exif-js or exif-parser. Then you might rotate/calculate the rotation yourself by the given orientation-number:
Further informations about exif-orientation: https://github.com/bwindels/exif-parser
answered Apr 8 at 10:27
MickMick
2,9333 gold badges18 silver badges38 bronze badges
add a comment |
Actually the width and height are not switched, instead your portrait-image IS a landscape-image. The information that this landsccape-image has a portrait-orientation is saved within exif-data of the image-file. When you open the image on macOS, iOS or Windows it checks the exif-data and rotates the image on display so you will never notice it is actually saved as landscape.
To read out the exif-data in JavaScript you can use scripts like exif-js or exif-parser. Then you might rotate/calculate the rotation yourself by the given orientation-number:
Further informations about exif-orientation: https://github.com/bwindels/exif-parser
answered Apr 8 at 10:27
MickMick
2,9333 gold badges18 silver badges38 bronze badges
add a comment |
Actually the width and height are not switched, instead your portrait-image IS a landscape-image. The information that this landsccape-image has a portrait-orientation is saved within exif-data of the image-file. When you open the image on macOS, iOS or Windows it checks the exif-data and rotates the image on display so you will never notice it is actually saved as landscape.
To read out the exif-data in JavaScript you can use scripts like exif-js or exif-parser. Then you might rotate/calculate the rotation yourself by the given orientation-number:
Further informations about exif-orientation: https://github.com/bwindels/exif-parser
answered Apr 8 at 10:27
MickMick
2,9333 gold badges18 silver badges38 bronze badges
Actually the width and height are not switched, instead your portrait-image IS a landscape-image. The information that this landsccape-image has a portrait-orientation is saved within exif-data of the image-file. When you open the image on macOS, iOS or Windows it checks the exif-data and rotates the image on display so you will never notice it is actually saved as landscape.
To read out the exif-data in JavaScript you can use scripts like exif-js or exif-parser. Then you might rotate/calculate the rotation yourself by the given orientation-number:
Further informations about exif-orientation: https://github.com/bwindels/exif-parser
answered Apr 8 at 10:27
MickMick
2,9333 gold badges18 silver badges38 bronze badges
answered Apr 8 at 10:27
MickMick
2,9333 gold badges18 silver badges38 bronze badges
answered Apr 8 at 10:27
MickMick
2,9333 gold badges18 silver badges38 bronze badges
answered Apr 8 at 10:27
MickMick
2,9333 gold badges18 silver badges38 bronze badges
2,9333 gold badges18 silver badges38 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55388699%2fiphone-xr-image-from-camera-have-width-and-height-switched-in-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
