Szukam sposobu na zmianę rozmiaru obrazu po stronie klienta za pomocą JavaScript (naprawdę zmień rozmiar, a nie tylko zmień szerokość i wysokość).
Wiem, że można to zrobić we Flashu, ale chciałbym tego uniknąć, jeśli to możliwe.
Czy jest gdzieś w sieci jakiś algorytm open source?
javascript
image
resize
client-side
geraud
źródło
źródło
Odpowiedzi:
Oto streszczenie, które to robi: https://gist.github.com/dcollien/312bce1270a5f511bf4a
(wersja es6 i wersja .js, które można umieścić w tagu skryptu)
Możesz go użyć w następujący sposób:
Zawiera kilka funkcji wykrywania wsparcia i wypełniaczy, aby upewnić się, że działa na tylu przeglądarkach, ile zdołam.
(ignoruje również obrazy GIF - na wypadek, gdyby były animowane)
źródło
imageSmoothingEnabled
na true iimageSmoothingQuality
nahigh
. W maszynopisie blok ten wygląda następująco:const ctx = canvas.getContext('2d'); ctx.imageSmoothingEnabled = true; (ctx as any).imageSmoothingQuality = 'high'; ctx.drawImage(image, 0, 0, width, height);
Odpowiedź brzmi: tak - w HTML 5 możesz zmieniać rozmiar obrazów po stronie klienta za pomocą elementu canvas. Możesz także pobrać nowe dane i wysłać je na serwer. Zobacz ten samouczek:
http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
źródło
Jeśli zmieniałeś rozmiar przed załadowaniem, właśnie znalazłem to http://www.plupload.com/
Robi za Ciebie całą magię w każdą możliwą metodę.
Niestety zmiana rozmiaru HTML5 jest obsługiwana tylko przez przeglądarkę Mozilla, ale możesz przekierować inne przeglądarki do Flash i Silverlight.
Właśnie go wypróbowałem i zadziałało z moim Androidem!
Używałem http://swfupload.org/ lampa błyskowa, to spełnia swoje zadanie bardzo dobrze, ale wielkość zmiany rozmiaru jest bardzo mała. (nie pamięta limitu) i nie wraca do html4, gdy flash nie jest dostępny.
źródło
http://nodeca.github.io/pica/demo/
W nowoczesnej przeglądarce możesz załadować / zapisać dane obrazu za pomocą płótna. Ale powinieneś pamiętać o kilku rzeczach, jeśli zmienisz rozmiar obrazu na kliencie:
źródło
Być może z tagiem Canvas (chociaż nie jest przenośny). Jest to blog o tym, jak obrócić obraz z płótna tutaj , przypuszczam, jeśli można go obracać, można go zmienić. Może to może być punkt wyjścia.
Zobacz również tę bibliotekę .
źródło
Możesz użyć struktury przetwarzania obrazu JavaScript do przetwarzania obrazu po stronie klienta przed przesłaniem obrazu na serwer.
Poniżej wykorzystałem MarvinJ do stworzenia wykonywalnego kodu na podstawie przykładu na następującej stronie: „Przetwarzanie obrazów po stronie klienta przed przesłaniem ich na serwer”
Zasadniczo używam metody Marvin.scale (...) do zmiany rozmiaru obrazu. Następnie przesyłam obraz jako blob (używając metody image.toBlob () ). Serwer odpowiada, podając adres URL otrzymanego obrazu.
źródło
Tak, w nowoczesnych przeglądarkach jest to całkowicie wykonalne. Nawet wykonalne do momentu przesłania pliku specjalnie jako plik binarny po dokonaniu dowolnej liczby zmian w kanwie.
http://jsfiddle.net/bo40drmv/
(ta odpowiedź jest ulepszeniem przyjętej tutaj odpowiedzi )
Mając na uwadze, aby złapać proces przesyłania wyniku w PHP za pomocą czegoś podobnego do:
Jeśli martwisz się o punkt widzenia Witalija, możesz spróbować przyciąć i zmienić rozmiar działającego pliku jfiddle.
źródło
Z mojego doświadczenia wynika, że ten przykład jest najlepszym rozwiązaniem do przesyłania obrazu o zmienionym rozmiarze: https://zocada.com/compress-resize-images-javascript-browser/
Używa funkcji HTML5 Canvas.
Kod jest tak „prosty” jak ten:
Ta opcja ma tylko jedną wadę i jest związana z obracaniem obrazu, z powodu ignorowania danych EXIF. Nad którym w tej chwili pracuję. Zaktualizuje, gdy to zrobię.
Kolejnym minusem jest brak wsparcia dla IE / Edge, nad którym też pracuję. Chociaż w powyższym linku są informacje. W obu przypadkach.
źródło