Rozbité náhľady fotiek pri nahrávaní

FreemapSlovakia / freemap-v3-react

Freemap Slovakia web application (www.freemap.sk)

https://www.freemap.sk/

Apache License 2.0

35 stars 17 forks source link

Rozbité náhľady fotiek pri nahrávaní #590

Closed seg-on closed 3 years ago

seg-on commented 3 years ago

Poslednú doby sa mi začalo stávať že pri nahrávaní fotiek sa mi náhľady rozbili na rozhádzanú mozaiku Jedná sa podľa všetkého o fotky ktoré sú na výšku fotené.

zdila commented 3 years ago

Prosim priloz original jpg ktory ti to robi a aky browser a OS pouzivas.

seg-on commented 3 years ago

Používam Operu (ver. 77), OS WIN10. Robilo mi to aj na firemnom PC. Tam mám rovnakú konfiguráciu. http://tmp.segi.sk/IMG_20210611_154234.jpg Donedávna to nerobilo obrázky bývali naležato v náhľadoch ale nahraté už zobrazovalo správne.

tjamecny commented 3 years ago

Vo Firefoxe 78.11.0esr je náhľad v pohode:

Pravdepodobne Opera je na vine.

zdila commented 3 years ago

Aj v Chrome to robi. Reportovane na https://github.com/nodeca/pica/issues/211

tjamecny commented 3 years ago

Problem je s EXIF datami, lebo som otvoril obrazok v Gimp-e, otocil doprava, ulozil s EXIF datami a stvorceky boli "hore nohami". Ked som znova otvoril originalny obrazok, otocil doprava a vypol ukladanie EXIF dat, tak uz v Chromiu sa zobrazi spravne.

Kym nebude opravena chyba, tak zostava asi len takto manualne si pripravit fotky pred uploadom.

zdila commented 3 years ago

podla mna je exif dobre. v gimpr sa ma spytalo ci otocit podla exifu a ked som dal ze ano tak ho spravne otocilo.

tjamecny commented 3 years ago

Gimp (a ani aplikacia "Prehliadac obrazkov" v Gnome) s tym nema problem. Ale ak si v Gimp-e ulozis ten obrazok do noveho suboru s povodnymi EXIF datami, tak to bude stale rozbite.

zdila commented 3 years ago

vpohode, ja som to uz fixol v f894d13827c8a5820745e064b22b5241b4398df6 ale nenasadil. momentalne chybne otacalo vsetky fotky ktore mali nejaku orientation. a otacanie nema nic s rozbitim fotky.

puzrin commented 3 years ago

FYI. Problem is "in the middle"

At some point, Chrome started to apply orientation of images to display & canvas. This diverge result, because FireFox behaviour did not chabged.
pica v7.+ tries to use offscreen canvas when possible. Seems chrome miss orientation info at some point, and result become corrupted.

In short:

if you need proper display in all browsers, don't use orientation in final image
if you need resize blob (before upload), use https://github.com/nodeca/image-blob-reduce

zdila commented 3 years ago

@puzrin thanks for the details. In our case we only resize images to show previews in the browser (there may be many pictures loaded at once and this way we save some memory) but we upload the original file.

I also noticed that we must not apply exif orientation anymore and so I have removed that code. Now it works correctly in desktop Chrome and Firefox (haven't tested other borwsers).

But even without rotating the image and doing just the resizing the image is corrupted with Pica 7. But I may later try image-blob-reduce.

puzrin commented 3 years ago

We use https://github.com/lovell/sharp on server side to apply orientation of uploads. The whole process is:

user image => image-blob-reduce (resize in browser, optional) => sharp (finalize on server)

But even without rotating the image and doing just the resizing the image is corrupted with Pica 7.

At first glance, corruption happens only in v7 + when source has orientation (when new code with offscreen canvas used). We did not decided yet how to fix, but orientation will be different in Chore/FF anyway (Undefined Behaviour).

zdila commented 3 years ago

We use https://github.com/lovell/sharp on server side to apply orientation of uploads

We do the same :-)