Oto drapak do makaronu.
Mając na uwadze, że mamy lokalną pamięć HTML5 i xhr v2, a co nie. Zastanawiałem się, czy ktoś może znaleźć działający przykład, czy może po prostu dać mi tak lub nie w przypadku tego pytania:
Czy możliwe jest wstępne powiększenie obrazu przy użyciu nowego lokalnego magazynu (lub cokolwiek innego), aby użytkownik, który nie ma pojęcia o zmianie rozmiaru obrazu, mógł przeciągnąć swój obraz o wielkości 10 MB na moją stronę internetową, zmienia on rozmiar za pomocą nowego magazynu lokalnego i Następnie prześlij go w mniejszym rozmiarze.
Wiem doskonale, że możesz to zrobić za pomocą Flasha, apletów Java, aktywnego X ... Pytanie brzmi, czy możesz to zrobić za pomocą Javascript + HTML5.
Czekam na odpowiedź w tej sprawie.
Ta na razie.
źródło
onload
na obraz (podłącz ustawienia przed ustawieniemsrc
), ponieważ przeglądarka może wykonywać dekodowanie asynchronicznie, a piksele mogą być wcześniej niedostępnedrawImage
.ctx.drawImage()
końcem.Rozwiązałem ten problem kilka lat temu i przesłałem swoje rozwiązanie do github jako https://github.com/rossturner/HTML5-ImageUploader
Odpowiedź robertca wykorzystuje rozwiązanie zaproponowane w poście na blogu Mozilla Hacks , jednak stwierdziłem, że dawało to naprawdę słabą jakość obrazu przy zmianie rozmiaru do skali innej niż 2: 1 (lub jego wielokrotność). Zacząłem eksperymentować z różnymi algorytmami zmiany rozmiaru obrazu, chociaż większość z nich była dość powolna lub też nie były doskonałej jakości.
Wreszcie wymyśliłem rozwiązanie, które moim zdaniem działa szybko i ma też całkiem niezłą wydajność - ponieważ rozwiązanie Mozilli kopiowania z jednego płótna na inny działa szybko i bez utraty jakości obrazu w stosunku 2: 1, biorąc pod uwagę cel x pikseli szerokości i y pikseli wysokości, używam tej metody zmiany rozmiaru płótna, aż obraz znajdzie się między x a 2 x oraz y do 2 lat . W tym momencie przechodzę do algorytmicznej zmiany rozmiaru obrazu dla ostatniego „kroku” zmiany rozmiaru do rozmiaru docelowego. Po wypróbowaniu kilku różnych algorytmów zdecydowałem się na interpolację dwuliniową pobraną z bloga, który nie jest już online, ale jest dostępny za pośrednictwem archiwum internetowego, co daje dobre wyniki, oto odpowiedni kod:
Spowoduje to skalowanie obrazu do szerokości
config.maxWidth
, zachowując oryginalne proporcje. W momencie opracowywania działało to na iPadzie / iPhonie Safari oprócz głównych przeglądarek stacjonarnych (IE9 +, Firefox, Chrome), więc spodziewam się, że nadal będzie kompatybilny, biorąc pod uwagę szersze wykorzystanie HTML5 dzisiaj. Zauważ, że wywołanie canvas.toDataURL () przyjmuje typ MIME i jakość obrazu, co pozwoli ci kontrolować jakość i format pliku wyjściowego (potencjalnie inny niż wejście, jeśli chcesz).Jedynym punktem, którego to nie obejmuje, jest utrzymanie informacji o orientacji, bez znajomości tych metadanych obraz jest zmieniany i zapisywany w niezmienionej postaci, tracąc wszelkie metadane w obrazie w celu orientacji, co oznacza, że zdjęcia wykonane na tablecie „do góry nogami” były renderowane jako takie, chociaż byłyby odwrócone w wizjerze aparatu urządzenia. Jeśli jest to problem, ten post na blogu zawiera dobry przewodnik i przykłady kodu, jak to osiągnąć, co z pewnością można zintegrować z powyższym kodem.
źródło
Korekta do powyższego:
źródło
dataurl
nie ma go.img.width
iimg.height
początkowo są0
. Resztę funkcji należy umieścić w środkuimg.addEventListener('load', function () { // now the image has loaded, continue... });
Modyfikacja odpowiedzi Justina, która działa dla mnie:
źródło
Jeśli nie chcesz wymyślać koła, możesz spróbować plupload.com
źródło
Maszynopis
źródło
To nie zadziała. Po stronie PHP nie można zapisać tego pliku.
Zamiast tego użyj tego kodu:
źródło
Zmiana rozmiaru obrazów w elemencie canvas jest ogólnie złym pomysłem, ponieważ wykorzystuje najtańszą interpolację ramki. Wynikowy obraz zauważalnie obniża jakość. Poleciłbym użyć http://nodeca.github.io/pica/demo/ który zamiast tego może wykonać transformację Lanczosa. Powyższa strona demonstracyjna pokazuje różnicę między podejściami canvas i Lanczos.
Używa także robotów internetowych do równoległego zmieniania rozmiaru obrazów. Istnieje również implementacja WEBGL.
Istnieje kilka internetowych modyfikatorów obrazu, które używają pica do wykonywania pracy, takich jak https://myimageresizer.com
źródło
Przyjęta odpowiedź działa świetnie, ale logika zmiany rozmiaru ignoruje przypadek, w którym obraz jest większy niż maksimum tylko w jednej z osi (na przykład wysokość> maxHeight ale szerokość <= maxWidth).
Myślę, że następujący kod zajmuje się wszystkimi sprawami w bardziej prosty i funkcjonalny sposób (zignoruj adnotacje typu maszynopisu, jeśli używasz zwykłego javascript):
źródło
Możesz użyć dropzone.js, jeśli chcesz użyć prostego i łatwego menedżera przesyłania z funkcją zmiany rozmiaru przed funkcjami przesyłania.
Ma wbudowane funkcje zmiany rozmiaru, ale możesz podać własne, jeśli chcesz.
źródło