try to fix orientation on load
This commit is contained in:
parent
9fdc982ca6
commit
f9320069b7
1 changed files with 38 additions and 17 deletions
|
@ -15,20 +15,35 @@
|
||||||
export let haveFadeTransition = true;
|
export let haveFadeTransition = true;
|
||||||
export let element: HTMLDivElement | undefined = undefined;
|
export let element: HTMLDivElement | undefined = undefined;
|
||||||
|
|
||||||
// const orientationToRotation = (value: string): number => {
|
const orientationToRotation = (value: string): number => {
|
||||||
// switch (value) {
|
if (value === '1' || value === '6' || value === '8') {
|
||||||
// case '1':
|
if (imgWidth > imgHeight) {
|
||||||
// return 0;
|
return 0;
|
||||||
// case '3':
|
} else {
|
||||||
// return 180;
|
return 90;
|
||||||
// case '6':
|
}
|
||||||
// return 90;
|
}
|
||||||
// case '8':
|
switch (value) {
|
||||||
// return 270;
|
case '1':
|
||||||
// default:
|
return 0;
|
||||||
// return 0;
|
case '2':
|
||||||
// }
|
return 0;
|
||||||
// };
|
case '3':
|
||||||
|
return 180;
|
||||||
|
case '4':
|
||||||
|
return 0;
|
||||||
|
case '5':
|
||||||
|
return 270;
|
||||||
|
case '6':
|
||||||
|
return 90;
|
||||||
|
case '7':
|
||||||
|
return 90;
|
||||||
|
case '8':
|
||||||
|
return 270;
|
||||||
|
default:
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const getRotationModulo = (rotation: number): number => {
|
const getRotationModulo = (rotation: number): number => {
|
||||||
return ((rotation % 360) + 360) % 360;
|
return ((rotation % 360) + 360) % 360;
|
||||||
|
@ -46,11 +61,11 @@
|
||||||
case 0:
|
case 0:
|
||||||
return 1;
|
return 1;
|
||||||
case 90:
|
case 90:
|
||||||
return 6;
|
return 8;
|
||||||
case 180:
|
case 180:
|
||||||
return 3;
|
return 3;
|
||||||
case 270:
|
case 270:
|
||||||
return 8;
|
return 6;
|
||||||
default:
|
default:
|
||||||
return 1;
|
return 1;
|
||||||
}
|
}
|
||||||
|
@ -192,7 +207,13 @@
|
||||||
{#await loadAssetData({ loadOriginal: false })}
|
{#await loadAssetData({ loadOriginal: false })}
|
||||||
<LoadingSpinner />
|
<LoadingSpinner />
|
||||||
{:then}
|
{:then}
|
||||||
<div bind:this={imgElement} class="duration-500">
|
<div
|
||||||
|
bind:this={imgElement}
|
||||||
|
class="duration-500"
|
||||||
|
style={asset.exifInfo?.orientation
|
||||||
|
? `transform: rotate(${orientationToRotation(asset.exifInfo?.orientation)}deg);`
|
||||||
|
: ''}
|
||||||
|
>
|
||||||
<img
|
<img
|
||||||
transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}
|
transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}
|
||||||
src={assetData}
|
src={assetData}
|
||||||
|
|
Loading…
Reference in a new issue