Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js][jquery] Proporcjonalność zdjęcia
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
deha21
Witam,
Potrzebuję jquery lub ewentualnie czystym javascript takie działanie które z podanych danych szerokości i wysokości danego zdjęcia poda wynik zdjęcia proporcjonalnego względem nowej szerokości. Czyli mam dane
X=1024 oraz Y=768 i teraz wpisuje do X np. 640 i klikam na przycisk (on wywołuje funckcję) i wtedy wartość Y oblicza się proporcjonalnie czyli 480.
Działanie proporcjonalności zasięgnąłem z kodu tworzenia miniaturek biblioteką GD. Na matematyce się nie znam ale mniemam, że to coś takiego winksmiley.jpg
  1. $thumb_w=$new_w;
  2. $thumb_h=$old_y*($new_h/$old_x);

A więc zrobiłem coś takiego:
[JAVASCRIPT] pobierz, plaintext
  1. $('#ratiox').click(function(){
  2. var newY = orgH*(orgW/orgW);
  3. $('#orgH').val(newY);
  4. });
[JAVASCRIPT] pobierz, plaintext

Jest orgW/orgW dlatego, że newH będzie takie jak orgW.
Niestety nie działa. Dane z orgH i orgW są dobrze pobierane. I jeszcze, żeby się zaokrąglało do pełnych pikseli winksmiley.jpg

Proszę o pomoc
Pozdrawiam
erix
Cytat
Potrzebuję jquery lub ewentualnie czystym javascript takie działanie które z podanych danych szerokości i wysokości danego zdjęcia poda wynik zdjęcia proporcjonalnego względem nowej szerokości. Czyli mam dane


To nie ma znaczenia, czy JS, czy +jQuery.

Cytat
Na matematyce się nie znam ale mniemam, że to coś takiego

A ciężko policzyć proporcje jednego wymiaru względem drugiego i przemnożyć? Tu nie matematyka, tylko bardziej geografia. tongue.gif
deha21
Nie wiem do jakiej szkoły ty chodziłeś ale u mnie to właśnie nazywało się matematyką winksmiley.jpg Jakieś wskazówki co do kodu?
erix
Ale skala głównie przydaje się w praktyce na geografii. tongue.gif

W PHP korzystam mniej więcej z takiej konstrukcji:
  1. function scaleTo($maxValue, $scaleByWidth){
  2. if($scaleByWidth){
  3. $heightFactor = $this->height/$this->width;
  4. $this->resizeTo($maxValue, round($heightFactor*$maxValue));
  5. }else{
  6. $widthFactor = $this->width/$this->height;
  7. $this->resizeTo(round($widthFactor*$maxValue), $maxValue);
  8. }
  9. return;
  10. }


Praca domowa - wykombinuj coś z tego. ;]
nitek
problemu raczej w "algorytmie" nie ma... winksmiley.jpg


[JAVASCRIPT] pobierz, plaintext
  1. var old_szer=1024;
  2. var old_wys=768;
  3.  
  4. var new_szer=640;
  5.  
  6. var new_wys= (new_szer/old_szer)*old_wys;
  7. alert(new_wys);
  8.  
  9. //new_wys=480
[JAVASCRIPT] pobierz, plaintext
deha21
Hmm... Coś jakby nie działa:
[JAVASCRIPT] pobierz, plaintext
  1. var orgw = $('#orgw').val();
  2. var orgh = $('#orgh').val();
  3. var old_w = $('#old_w').val();
  4. var old_h = $('#old_h').val();
  5.  
  6. $('#ratiox').click(function(){
  7. var new_y = (orgw/old_w)*old_h;
  8. $('#orgh').val(new_y);
  9. });
[JAVASCRIPT] pobierz, plaintext

Zapewniam, że nazewnictwo jest dobre na 100% więc tu się nie pomyliłem.
Aha i orgw, org_h itp. są polami input text więc dlatego jest val a nie attr winksmiley.jpg
erix
Nie działa, to znaczy?
deha21
Aa już odkryłem co nie działa winksmiley.jpg Sam algorytm działa dobrze i wypisuje liczbę (jeszcze tutaj prośba jak ją zaokrąglić?). Tylko problem jest taki, że jak zmienię w polu "orgw" daną to nie jest ona uaktualniana.
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function(){
  2. var orgw = $('#orgw').val();
  3. var orgh = $('#orgh').val();
  4. var old_w = $('#old_w').val();
  5. var old_h = $('#old_h').val();
  6.  
  7. $('#ratiox').click(function(){
  8. var newy = (orgw/old_w)*old_h;
  9. $('#orgh').val(newy);
  10. });
  11. });
[JAVASCRIPT] pobierz, plaintext

Dane z orgw i orgh są na początku ustalane przez PHP (getimagesize). Ale przy zmianie zmienna orgw w js powinna się uaktualnić.
  1. <?
  2. Szerokość: <input type='text' name='width' id='orgw' value='".$width."' size='4'>
  3. Wysokość: <input type='text' name='height' id='orgh' value='".$height."' size='4'>
  4. ?>


Może znam rozwiązanie ale jest trochę na około i wydaje mi się, że znacie lepszy sposób. Chodzi o to, że przy edycji pola orgw zmienna orgw w js pobiera ponownie dane z pola orgw.
erix
Cytat
Chodzi o to, że przy edycji pola orgw zmienna orgw w js pobiera ponownie dane z pola orgw.

Jaśniej?
deha21
Ok zrobiłem. Chodziło o to, żeby przy naciśnięciu przycisku jeszcze raz pobrano wartość z pola.
Czyli dopisałem nową zmienną która jest tą uaktualnianą (ta stara odczytająca początkową wartość weight jest mi potrzebna jeszcze do czegoś innego).
[JAVASCRIPT] pobierz, plaintext
  1. $('#ratiox').click(function(){
  2. var orgw2 = $('#orgw').val();
  3. var newy = (orgw2/old_w)*old_h;
  4. $('#orgh').val(newy);
  5. });
[JAVASCRIPT] pobierz, plaintext


A co do zaokrąglania liczb to znalazłem Math.round winksmiley.jpg
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.