try to fix orientation on load

This commit is contained in:
martabal 2023-12-04 01:09:27 +01:00
parent 9fdc982ca6
commit f9320069b7
No known key found for this signature in database
GPG key ID: C00196E3148A52BD

View file

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