Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: kuvan skaalautuminen

Sivun loppuun

Vasta_alkaja [23.09.2009 11:21:10]

#

Hei,

Miten kannattaisi toteuttaa kuvan asettaminen sivulle, jos käyttäjä voi itse ladata kuvan. Käyttäjä todennäköisesti lataa liian suuria kuvia, eikä osaa niitä pienentää niin kuvaa ei kannata näyttää normaalikokoisena. Eli 100% suuntaansa ei ole hyvä. Entäs jos määrittää pelkän korkeuden ja antaa leveyden tulla itsestään. IE ainakin tekee vain leveän viivan.

Mikä olisi siis paras ratkaisu, koska kuvahan voi olla pysty tai sivuttaissuunnassa. silloin on vaikea arvata mikä olisi sopiva leveys ja korkeus. Onko kenelläkään hyviä ideoita, ennen kuin alan mitään soveltamaan.

Kiitoksia.

Teuro [23.09.2009 11:28:05]

#

Jos voit käyttää GD kirjastoa hyväksesi, niin kannattaa skaalata kuva valmiiksi oikeaan mittaan. Kuvan "pienentäminen" html atribuuttien witdh tai height avulla ei pienennä kuvaa ollenkaan.

Grez [23.09.2009 11:28:38]

#

Edit: Jahs, Teuro jo ehättikin

Mielestäni olisi aika pöljää antaa käyttäjän ladata joku 3 megan kokoinen kuva digikamerasta ja sitten vääntää se johonkin 640x480 kokoon väkisin ilman, että kuvatiedostoa oikeasti pienennetään. Ensinnäkin kuvien lataus kestäisi sikamaisen kauan ja kuvat näyttäisi ihan hirveiltä (koska selainten skaalausalgoritmit ei yleensä ole hirmu hyvät).

Eli skaalaa kuva sopivan kokoiseksi ohjelmallisesti ja sitten voit näyttää sen ihan normaalikokoisena.

Metabolix [23.09.2009 11:39:20]

#

Kirjoitin tästä vastikään esimerkin toiseen keskusteluun. Voit käyttää imagecreatefromstring-funktiota (file_get_contentsin kanssa), ettei tarvitse arvailla oikeaa tyyppiä, ja voit sitten dumpata skaalatun kuvan jpeginä paikalleen. (Voit tietysti myös säilyttää esimerkiksi png:t ja giffit alkuperäisen tyyppisinä, jottei jpeg-enkoodaus rumenna niitä.) Tällä menetelmällä vältät myös upload-vaiheessa tyyppitarkistukset, kun kelpuutat vain kuvat, jotka imagecreatefromstring saa auki.

Vasta_alkaja [24.09.2009 14:24:49]

#

Metabolixin linkin takaa löytyi kyllä hyvä vinkki jota aion noudattaa. Jopa sen ymmärsin, mutta nuo valmiit functiot antavat hämyjä.

var_dump =
array(5) {
["name"]=>  string(10) "k_ 019.jpg"
["type"]=>  string(10) "image/jpeg"
["tmp_name"]=>  string(21) "C:\wamp\tmp\php2F.tmp"
["error"]=>  int(0)
["size"]=>  int(76552)
}

tässä sitten onkin ihmettelemistä. Mihin tämä ongelma liittyy sillä kuva ja kansio on valmis. Eikös kuvan muutos tehdä kuitenkin ennen siirtoa.

Warning: imagecreatefromjpeg(k_ 019.jpg): failed to open stream: No such file or directory in C:\wamp\www\Kotisivut\PyhajarvenHelluntaiSeurakunta\kuvanlataaminenpalvelimelle.php on line 84

  $f_suuri = $valittukuva["name"];
  $f_pieni = preg_replace('/(.+)\\.(.+)/', '$1.pieni.$2', $f); // kuva.pieni.jpg
  // if ($f_pieni == $f_suuri) die("Virheellinen tiedostonimi!");

rivi 84  = $suuri = imagecreatefromjpeg($f_suuri);

Eli olettaisin vian olevan tässä imagecreatefromjpeg :)

TeNDoLLA [24.09.2009 14:42:15]

#

Sun pitää antaa sille parametrinä se kuvan nimi polkuineen ellei se kuva ole samassa hakemistossa tuon scriptin kanssa.

Lebe80 [24.09.2009 16:01:03]

#

...ja eihän se sitä voi olla, jos se sijaitsee uploadattuna temppi-hakemistossa.

Vasta_alkaja [24.09.2009 16:04:23]

#

V*tt* ja joo, mä tyhmä oon... Tietenkin, tietenkin.. Kiitoksia.

Vasta_alkaja [24.09.2009 21:24:43]

#

Varmasti on turhaakin, sitä saa neuvoa karsimaan pois. Mutta nyt siirryn seuraavaan ongelmaan. Kansiossa on 777 oikeudet ja saan seuraavan virheilmoituksen, eli omani.

echo "<p>Kuvan siirtäminen haluttuun kansioon on epäonnistunut</p>";

Tiedoston lataamisessa siis ongelma, mutta mikä. Vieläkö teillä on energiaa puurtaa tätä kanssani. :)

$valittukuva = '';
$valittukuva = $_FILES["kuva"];

if(!empty($_POST["lahetys"])){
    LataakuvaPalvelimelle($valittukuva);
}

function extension($f) {
    $info = pathinfo($f);
    $e = &$info["extension"];
    return $e;
}

function LataakuvaPalvelimelle($valittukuva){
    $kansionnimi = 'images';

    if(empty($valittukuva)) return;

    $f_suuri = $valittukuva["tmp_name"];
    $f_pieni = preg_replace('/(.+)\\.(.+)/', '$1.pieni.$2', $f);
    $suuri = imagecreatefromjpeg($f_suuri);

    $suuri_w = imagesx($suuri);
    $suuri_h = imagesy($suuri);
    $pieni_w = 160;
    $pieni_h = 120;

    if ($suuri_w <= $pieni_w && $suuri_h <= $pieni_h) {
      $pieni = $suuri;
    } else {
      $pieni_w2 = (int) round($pieni_h * $suuri_w / $suuri_h);
      $pieni_h2 = (int) round($pieni_w * $suuri_h / $suuri_w);
      if ($pieni_w2 < $pieni_w) {
        $pieni_w = $pieni_w2;
    } else {
        $pieni_h = $pieni_h2;
      }

      $pieni = imagecreatetruecolor($pieni_w, $pieni_h);
      imagecopyresampled($pieni, $suuri, 0, 0, 0, 0, $pieni_w, $pieni_h, $suuri_w, $suuri_h);
    }

    imagejpeg($pieni, $f_pieni);

    if(empty($valittukuva["type"])){
      $valittukuva["type"] = 'image/'.extension($valittukuva["name"]);
    }

    // Tarkistetaan onko kuvan tyyppinä jpeg tai gif, jos on mennään eteenpäin
    if($valittukuva["type"] == 'image/jpg'
    	|| $valittukuva["type"] == 'image/jpeg'
    	|| $valittukuva["type"] == 'image/gif'
    	|| $valittukuva["type"] == 'image/jfif'
    	|| $valittukuva["type"] == 'image/pjpg'
    	|| $valittukuva["type"] == 'image/pjpeg'
    ){

      @mkdir("$kansionnimi");

      $kuvahakemisto = "$kansionnimi/";

      $korvattavat = array("ä", "ö", "å", " ");
      $kuvannimi = str_ireplace($korvattavat, "", "$valittukuva[name]");

      if (file_exists("$kuvahakemisto" . "$kuvannimi")) {
          echo "<p class='ilmoitus'>Samanniminen tiedosto on jo ladattu!</p>";
          return;
      }

      if($file["error"] != 0 && $valittukuva["size"] <= 0){
          echo 'Virhe kuvan latauksessa.';
          return;
      }

      if(move_uploaded_file($f_pieni, $kuvahakemisto . $kuvannimi)){

      $kuva = $kansionnimi.'/'.$kuvannimi;

      $paikka = strpos($valittukuva["name"], ".");

      if($paikka !== false) {
        $katkaisu = substr($valittukuva["name"], 0, $paikka);
      }

      $k = sprintf("INSERT INTO kuvagalleria SET
          kuva='%s',
          nimi='%s',
          sijainti=%d",
          get_magic_quotes_gpc() ? mysql_real_escape_string(stripslashes(trim($kuva))) : mysql_real_escape_string(trim($kuva)),
          get_magic_quotes_gpc() ? mysql_real_escape_string(stripslashes(trim($katkaisu))) : mysql_real_escape_string(trim($katkaisu)),
          intval($_POST['sijainti'])
          );

          if(!($t = mysql_query($k))){
              echo mysql_error();
              return;
          }
          echo '<p>Kuvan lataaminen on onnistunut</p>';
      }
      else
      {
          echo "<p>Kuvan siirtäminen haluttuun kansioon on epäonnistunut</p>";
      }
   }
   else{
      echo "<p>Kuvan tunniste on väärä. Salitut muodot on jpeg, jpg sekä gif. Jos tyyppi on kuitenkin oikea, ei kuvan tyyppiä voitu tunnistaa.</p>";
   }
}

Vasta_alkaja [24.09.2009 22:30:32]

#

echo $pieni = Resource id #6

Metabolix [24.09.2009 23:40:57]

#

Otetaanpa nyt ihan uusiksi.

Älä ota koodistani mallia noiden tiedostonimien kanssa kikkailuun, koska alkuperäinen koodi on tarkoitettu valmiin kuvagallerian pikkukuvien muodostukseen. Siirrä kuva paikalleen move_uploaded_file-funktiolla aivan kuten ennenkin. Sijoita kumpaankin tiedostonimeen sen kuvan lopullinen sijainti, jolloin siis pieni kuva tallennetaan muunnoksen lopuksi suuren päälle. (Jos jokin menee matkalla pieleen, poista kuvatiedosto ja ilmoita virheestä.)

<?php
// siirrä kuva; move_uploaded_file
// pienennä kuva; antamani koodi; $f_suuri = $f_pieni = "kuvat/kuva.jpg";

Vasta_alkaja [25.09.2009 00:41:19]

#

Ei muuta kuin sorviin ääreen sitten :) saa nähdä mitä tulee. Jos joskus valmista saan niin pastaan tänne muidenkin iloksi :)

Vasta_alkaja [30.09.2009 21:31:54]

#

Huono englanti, suuri ongelma. Tässä viimeisin raapustukseni kommentteineen.
Taitaa olla pienestä kiinni, mutta kun ei tajua niin ei tajua.

<?php
?>
<html>
<head>
<style type="text/css">
.ilmoitus{
    background:white;
    padding:4px;
    border:1px solid black;
}
.nav{
    width:100%;
    padding:1px;
    border-bottom:3px solid #66CC66;
}
a{
  text-decoration:none;
  color:black;
}

.button{
  border-left:2px solid rgb(0,102,0);
  border-top:1px solid rgb(0,102,0);
  border-right:1px solid rgb(0,102,0);
  border-bottom:2px solid rgb(0,102,0);
  background:green;
  color:white;
}
.button:hover{
  border-left:1px solid rgb(0,102,0);
  border-top:2px solid rgb(0,102,0);
  border-right:2px solid rgb(0,102,0);
  border-bottom:1px solid rgb(0,102,0);
  background:green;
  color:yellow;
}
</style>
<title>Tiedoston lataaminen palvelimelle</title>
</head>
<body>

<table class="nav">
<tr>
    <td><a href="<?php echo $sivunnimi; ?>">Takaisin pääsivulle</a></td>
</tr>
</table>

<br />

<?php
/*

Onko tyhjäksi alustaminen edes tarpeen

*/

$valittukuva = '';
$valittukuva = $_FILES["kuva"];

if(!empty($_POST["lahetys"])){
    LataakuvaPalvelimelle($valittukuva);
}

/*

Eikös tämäkin ole oikeastaan turha, koska sitä käytetään vain vaiheessa VAIHE 1, jonka oletan olevan myös turha

*/
function extension($f) {
    $info = pathinfo($f);
    $e = &$info["extension"];
    return $e;
}

function LataakuvaPalvelimelle($valittukuva){
    $kansionnimi = 'images';

    if(empty($valittukuva)){
        return;
    }

    /*
    VAIHE 1
    tämähän on oikeasstaan mahdoton tilanne vai ?
    */
    if(empty($valittukuva["type"])){
      $valittukuva["type"] = 'image/'.extension($valittukuva["name"]);
    }



    $tiedoston_nimi = $valittukuva["tmp_name"];

    $leveys = '200';
    $korkeus = '200';

    /*

    Olettaisin, että tässä katsotaan kuvan oikea koko

    */
    list($leveys_originaali, $korkeus_originaali) = getimagesize($tiedoston_nimi);

    $mittasuhde_originaali = $leveys_originaali/$korkeus_originaali;

    /*

    Oikea koko saadaan matemaattisesti laskemalla halutuksi, eli tässä tapauksessa tuo kiinteä koko 200 per suunta

    */

    if($leveys/$korkeus > $mittasuhde_originaali){
      $leveys = $korkeus*$mittasuhde_originaali;
    }else{
      $korkeus = $leveys/$mittasuhde_originaali;
    }


    /*
      Äkkiseltään olettaisin, että pidetään kuvasuhde oikeana ja kuva siistinä?
    */

    $kuva_pieni = imagecreatetruecolor($leveys, $korkeus);

    /*
      Luodaan kuvasta jpeg, mutta eikös se tehdä tuossa imagejpeg:ssä vai onko se vain ulostulo ja turha.
    */
    $kuva = imagecreatefromjpeg($tiedoston_nimi);

    /* kopioidaan pieni kuva suuren vanhan päälle vai ? */
    imagecopyresampled($kuva_pieni, $kuva, 0,0,0,0, $leveys, $korkeus, $leveys_originaali, $korkeus_originaali);

    /*

    Muuttaako tämä kuvan JPG kuvaksi ? Eikös olekkin niin

    */
    imagejpeg($kuva_pieni, null, 100);

    /**/

    // Tarkistetaan onko kuvan tyyppinä jpeg tai gif, jos on mennään eteenpäin
    if($valittukuva["type"] == 'image/jpg'
      || $valittukuva["type"] == 'image/jpeg'
      || $valittukuva["type"] == 'image/gif'
      || $valittukuva["type"] == 'image/jfif'
      || $valittukuva["type"] == 'image/pjpg'
      || $valittukuva["type"] == 'image/pjpeg'
    ){

        // merkki @ estää virheet siltä varalta, että hakemisto on jo olemassa.
        @mkdir("$kansionnimi");

        $kuvahakemisto = "$kansionnimi/";

        // Muutetaan nimi turvallisemmaksi
        $korvattavat = array("ä", "ö", "å", " ");
        $kuvannimi = str_ireplace($korvattavat, "", "$valittukuva[name]");

        # Tarkistetaan onko tiedosto jo olemassa
        if (file_exists("$kuvahakemisto" . "$kuvannimi")) {
            echo "<p class='ilmoitus'>Samanniminen tiedosto on jo ladattu!</p>";
            return;
        }

        /* Tarkistaa, onko parametrina annettu tiedosto kelvollinen www-lomakkeen kautta
           palvelimelle ladattu tiedosto ja siirtää sen lisäksi tiedoston
           haluttuun paikkaan. */

        if($file["error"] != 0 && $valittukuva["size"] <= 0){
            echo 'Virhe kuvan latauksessa.';
            return;
        }

        /*

          jos muuttujan $kuva tilalla on seuraava pätkä $valittukuva["tmp_name"],
          toimii kuvan lataus palvelimelle, mutta kokoa ei muuteta.
        */

        if(move_uploaded_file($kuva, $kuvahakemisto . $kuvannimi)){

        $kuva = $kansionnimi.'/'.$kuvannimi;

        $paikka = strpos($valittukuva["name"], ".");

        if($paikka !== false) {
          $katkaisu = substr($valittukuva["name"], 0, $paikka);
        }

        $k = sprintf("INSERT INTO kuvagalleria SET
            kuva='%s',
            nimi='%s',
            sijainti=%d",
            get_magic_quotes_gpc() ? mysql_real_escape_string(stripslashes(trim($kuva))) : mysql_real_escape_string(trim($kuva)),
            get_magic_quotes_gpc() ? mysql_real_escape_string(stripslashes(trim($katkaisu))) : mysql_real_escape_string(trim($katkaisu)),
            intval($_POST['sijainti'])
            );

            if(!($t = mysql_query($k))){
                echo mysql_error();
                return;
            }

            //header("location:kuvanlataaminenpalvelimelle.php");
            echo '<p>Kuvan lataaminen on onnistunut</p>';
        }
        else
        {
            /*

              Koodi antaa tämän virheilmoituksen, eli kuvan lataaminen ei onnistunut miksi ?


            */

            echo "<p>Kuvan siirtäminen haluttuun kansioon on epäonnistunut</p>";
        }
   }
   else{
      echo "<p>Kuvan tunniste on väärä. Salitut muodot on jpeg, jpg sekä gif. Jos tyyppi on kuitenkin oikea, ei kuvan tyyppiä voitu tunnistaa.</p>";
   }
}
?>
<form enctype="multipart/form-data" action="" method="post">
<table border="0" style="width:100%; border:1px solid black;"
    cellspacing="0">

<tr><td style="background:#66CC66;">&nbsp;</td></tr>
<tr>
<td style="background:white;">
    <input type="hidden" name="" value="">
    <br />&nbsp;Kuvatiedosto:
    <input type="file" name="kuva">

    <select name="sijainti">
      <option value="0"> Etusivun valikkoon </option>
      <option value="1"> Lapsityö </option>
      <option value="2"> Kerhot </option>
      <option value="3"> Kesäleiri </option>
      <option value="4"> Nuorisotyö </option>
      <option value="5"> Gospel illat </option>
      <option value="6"> Jeesus-bussi </option>
    </select>

    <input name="lahetys" type="submit"value="Lähetä">
    <br />
    <br />
</td>
</tr>
<tr><td style="background:#66CC66;">&nbsp;</td></tr>
</table>

</form>
</body>
</html>

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta