[t.....l]

Cześć Mirki, mam pewien problem i może ktoś z Was coś doradzi.

Piszę appkę, w której jedną z głównych funkcji jest zoomowanie obrazów. Z racji tego, że na obraz będą nanoszone obszary (mniejsze i większe), uznałem, że najlepszym wyjściem bedzie użycie do tego svg i aplikowanie potomków. Niemniej jednak domyślne obrazy mają po 5000x3500 pikseli i takie muszą zostać. Z racji tego zaciągam z bazy obraz wraz wymiarami, ładuję go jako tło kanwy a zooma załatwiam przy użyciu transform: scale() w CSS.

Sęk w tym, że obraz skalowany dynamicznie przez przeglądarkę znacząco traci na jakości podczas pomniejszania.
Da się jakoś zmusić przeglądarki (zalezy mi jedynie na Chrome i IE) do ładnego skalowania obrazów? Zalezy mi tylko na skalowaniu w zakresie 0.01-0.99, powyzej 1 nie będę nic skalować.

#javascript #html5 #css

[karer]

@tomash-pl: w jaki sposob skalujesz? Globalnie zawsze od tego wielkiego obrazu czy lokalnie po zmianach. Powinienes zawsze stosowac rozwiazanie pierwsze. Bez kawalka kodu nic nie powiem bo przegladarki ktore wymieniles dzialaja dobrze. Kod masz skopany.

[t.....l]

@karer: Globalnie od wielkiego obrazu.
https://jsfiddle.net/r2k6hbh7/

[rbielawski]

Da się jakoś zmusić przeglądarki (...) do ładnego skalowania obrazów?

@tomash-pl: spróbuj do transform dodać translateZ(0) (czyli: transform: scale(x) translateZ(0);).

[karer]

@tomash-pl: chyba wiem co masz na mysli. Pare linkow

http://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d
http://stackoverflow.com/questions/27060690/webkit-transform-scale-blurry-images

Daj znac jesli rozwiazesz problem

[t.....l]

@rbielawski: @karer: niestety, ale żadne z tych rozwiązań nie działa jak należy. Odpuszczę sobie chyba póki co, bo nie jest to krytyczny bug, ale będę szukał dalej jak się już uporam z innymi rzeczami ;] Dzięki za pomoc :)

[t.....l]

@karer: @rbielawski: odnośnie rozwiązania problemu - uznałem, że będę w finalnej wersji dynamicznie serwował z backendu obrazy o odpowiedniej rozdzielczości (w kilku krokach) i przeładowywał je w locie. Może nie jest to najwydajniejsze, ale: 1. działa, 2. wydajność < użyteczność, a przynajmniej w tym projekcie.

[karer]

@tomash-pl: jesli juz bawisz sie w wiele rozdzielczosci to maksymalne zwiekszenie obciazenia to 2 krotne wykorzystanie lacza. Wydajnosc nie powinna spasc nawet o ulamek.

[t.....l]

@karer: nie do końca zrozumiałem, niemniej ten projekt będzie hostowany tylko lokalnie w ramach jednej sieci, stąd czas przesyłu danych będzie pomijalnie niski.

[karer]

@tomash-pl: w przypadku zastosowania wielu rozdzielczosci nalezy okreslic ile zajmowac beda obrazki o roznych rozdzielczosciach. Tak wiec jesli orginalny zajmowal 10 mega, to obrazki o rozdzielczosciach 2 krotnie mniejszych do nieskonczonosci beda razem z orginalnym zajmowac 20 mega.

Wyswietlanie nie bedzie wolniejsze. Jedynie wiecej informacji bedzie przesylanych.

[t.....l]

@karer: no to w sumie tak, jak myślałem. Tu na szczęście maksymalna waga obrazka to około 300kB, więc przy takim założeniu wyjdzie około 600kB, może ciut więcej, jeśli zdecyduję się na kroki co 25%, a nie co 50% skali. :)