Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

3 Stron V  < 1 2 3  
Reply to this topicStart new topic
> [JavaScript][AJAX][PHP]Zmiana DPI - zmiana źródła
rafik73
post 3.01.2020, 16:26:37
Post #41





Grupa: Zarejestrowani
Postów: 182
Pomógł: 0
Dołączył: 19.03.2014

Ostrzeżenie: (0%)
-----


Tak sobie pomyślałem, że jakby zmienić DPI za pomocą JavaScript to wszystko działoby się po stronie przeglądarki i szybkość by bardzo wzrosła. Tylko jak przerobić ten skrypt PHP na JS?
Go to the top of the page
+Quote Post
trueblue
post 3.01.2020, 17:19:41
Post #42





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


A skąd wiesz czy wolne działanie skryptu nie jest spowodowane skryptem JS do robienia "zrzutów ekranowych"?
Być może problem leży w samym przetwarzaniu elementów HTML na Canvas, albo kompresją obrazu do JPEG.

Swoją drogą pogarszasz jakość dwukrotnie. Raz kiedy właśnie z HTML jest tworzony JPEG, a potem kiedy ten JPEG staje się źródłem dla celów skalowania i tworzysz ponownie JPEG. Może lepiej i szybciej byłoby tworzyć PNG, a potem JPEG.

Warto też zajrzeć do dokumentacji domtoimage. Są tam parametry width oraz height, być może już w tym momencie będziesz mógł zmienić skalę, bez potrzeby zaprzęgania PHP.


--------------------
Go to the top of the page
+Quote Post
nospor
post 3.01.2020, 17:21:06
Post #43





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Cytat
A skąd wiesz czy wolne działanie skryptu nie jest spowodowane skryptem JS do robienia "zrzutów ekranowych"?
Napisal wczesniej, ze na localhost dziala jak ta lala, wiec problem przegladarki mozna raczej wykluczyc wink.gif


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
rafik73
post 6.01.2020, 18:12:21
Post #44





Grupa: Zarejestrowani
Postów: 182
Pomógł: 0
Dołączył: 19.03.2014

Ostrzeżenie: (0%)
-----


Cytat(trueblue @ 3.01.2020, 17:19:41 ) *
A skąd wiesz czy wolne działanie skryptu nie jest spowodowane skryptem JS do robienia "zrzutów ekranowych"?
Być może problem leży w samym przetwarzaniu elementów HTML na Canvas, albo kompresją obrazu do JPEG.

Swoją drogą pogarszasz jakość dwukrotnie. Raz kiedy właśnie z HTML jest tworzony JPEG, a potem kiedy ten JPEG staje się źródłem dla celów skalowania i tworzysz ponownie JPEG. Może lepiej i szybciej byłoby tworzyć PNG, a potem JPEG.

Warto też zajrzeć do dokumentacji domtoimage. Są tam parametry width oraz height, być może już w tym momencie będziesz mógł zmienić skalę, bez potrzeby zaprzęgania PHP.


Maksymalny i optymalny rozmiar diva z którego tworzone jest zdjęcie jaki mi się udało zrobić to 1035x670 px. Potrzebuję uzyskać rozmiar do wydruku: 14,6x9,5 cm. Żeby uzyskać taki rozmiar muszę ustawić DPI na 180. W ten sposób jakość zdjęcia jest bardzo dobra i czytelna.


Tak więc skalowanie muszę przeprowadzać DPI a nie rozdzielczością.

Tym bardziej, że zmniejszając rozdzielczość tracę jakość i dochodzi blur.

Nie znajdzie się nikt, kto dałby radę przerobić to rozwiązanie w 100% na JavaScript? closedeyes.gif
Go to the top of the page
+Quote Post
trueblue
post 6.01.2020, 20:26:18
Post #45





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


A dlaczego skalujesz obrazek w PHP pomimo, że pisałeś, że skalowanie musisz przeprowadzać tylko z pomocą DPI? W kodzie PHP używasz imagecopyresampled, choć oczywiście też podmieniasz bajty odpowiedzialne za DPI.
Gdybyś uzyskiwał obrazek w skali docelowej z samego domtoimage, to można by się pokusić o pobranie danych jako Blob i umieścić w typowanej tablicy, a niej podmienić bajty i zapisać do pliku.


--------------------
Go to the top of the page
+Quote Post
rafik73
post 7.01.2020, 07:26:08
Post #46





Grupa: Zarejestrowani
Postów: 182
Pomógł: 0
Dołączył: 19.03.2014

Ostrzeżenie: (0%)
-----


Po ostatnich przeróbkach ustawiam wymiary ma sztywno za pomocą width i height w domtoimage. A to z tego względu,że jeśli obrócę mapkę którą obramiam w Openlayers ,zmieniają się jej rozmiary - zawsze się powiększają więc cięcie do wymiaru na sztywno nie pogarsza jakości . W domtoimage istnieje funkcja toBlob. Chcesz utworzyć tablicę bajt po bajcie?

https://javascript.info/blob

Ten post edytował rafik73 7.01.2020, 07:54:56
Go to the top of the page
+Quote Post
trueblue
post 7.01.2020, 09:52:30
Post #47





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Tak.
https://javascript.info/blob#from-blob-to-arraybuffer
A z ArrayBuffer rzutować na tablicę Uint8Array. Zmienić bajty i ponownie na Blob i obrazek.


--------------------
Go to the top of the page
+Quote Post
rafik73
post 10.01.2020, 07:46:32
Post #48





Grupa: Zarejestrowani
Postów: 182
Pomógł: 0
Dołączył: 19.03.2014

Ostrzeżenie: (0%)
-----


Wersja na szybko - testowane, działa

https://github.com/shutterstock/changeDPI
Go to the top of the page
+Quote Post
trueblue
post 10.01.2020, 09:23:39
Post #49





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Również na identycznej zasadzie. Szkoda, że nie pokusiłeś się sam o napisanie. Na pewno skrypt byłby mniejszy wagowo.


--------------------
Go to the top of the page
+Quote Post
rafik73
post 18.01.2020, 20:17:52
Post #50





Grupa: Zarejestrowani
Postów: 182
Pomógł: 0
Dołączył: 19.03.2014

Ostrzeżenie: (0%)
-----


Można "pociąć" tą bibliotekę i wyciągnąć tylko to co potrzebne. Szczerze to na tę chwilę nie mam czasu na zabawę, ale napewno wrócę do tematu.

Pojawił się kolejny problem, tym razem z CORS. Kiedy próbuję zapisać canvas do pliku graficznego wyskakuje mi taki błąd:

[APACHE] pobierz, plaintext
  1. Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
  2. at makeNodeCopy
[APACHE] pobierz, plaintext


Ma ktoś doświadczenie z CORS? Jak obejść to zabezpieczenie?
Go to the top of the page
+Quote Post
trueblue
post 18.01.2020, 21:40:53
Post #51





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


https://developer.mozilla.org/en-US/docs/We...S_enabled_image


--------------------
Go to the top of the page
+Quote Post
rafik73
post 20.01.2020, 14:36:32
Post #52





Grupa: Zarejestrowani
Postów: 182
Pomógł: 0
Dołączył: 19.03.2014

Ostrzeżenie: (0%)
-----


Nie za bardzo mogę sobie z tym poradzić.
Ten kod:
[APACHE] pobierz, plaintext
  1. <IfModule mod_setenvif.c>
  2. <IfModule mod_headers.c>
  3. <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
  4. SetEnvIf Origin ":" IS_CORS
  5. Header set Access-Control-Allow-Origin "*" env=IS_CORS
  6. </FilesMatch>
  7. </IfModule>
  8. </IfModule>
[APACHE] pobierz, plaintext


próbowałem dodawać do .httpaccess albo do httpd.conf ale bez efektu. Zdjęcie pobieram z canvas z użyciem Openlayers.
Przy tym typie mapy jaki używam w specyfikacji
https://openlayers.org/en/latest/apidoc/mod...ce_XYZ-XYZ.html
zalecają ustawienie parametru crossOrigin, ustawiam go zgodnie z kodem ze strony
https://developer.mozilla.org/en-US/docs/We...S_enabled_image
na wartość anonymous i dalej CORS blokuje wyświetlenie mapy w canvas.
To fragment kodu JS który konfiguruje wyświetlaną mapę:

[JAVASCRIPT] pobierz, plaintext
  1. var pdf_map_source_loaded_source = new ol.source.XYZ({url :'https://1.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png?app_id=[moje APP_ID}&app_code={mój APP_CODE}'
  2. ,
  3. crossOrigin:'anonymous'
  4. });
[JAVASCRIPT] pobierz, plaintext


Okazało się,że to problem z kodem Api, który poprawiłem. Nic na to nie wskazywało. Dopiero pod konsolą w przeglądarce Edge wyrzuciło HTTP 401.
Chrome i Firefox nawet się nie zająknął co do tego błędu bardziej skupiając się na problemie z CORS.
Go to the top of the page
+Quote Post

3 Stron V  < 1 2 3
Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 03:20