Autor Zpráva
zezula
Profil
Dobrý den, nedávno jsem se začal "bavit" problematikou obrázků.. mým cílem je web, kde vyberu obrázek z PC, zobrazí se mi jeho náhled, podle potřeby ho otočím a nahraji na server. Při nahrávání by se měl otočený obrázek zmenšit na požadované rozlišení (v příkladu 650px) a v té velikosti a orientaci se na server uložit. Prošel jsem různé fóra, nastudoval a postahoval různé příklady a řešení a zatím jsem vytvořil tohle: Obrázek vyberu z PC, zobrazí se mi jeho náhled a můžu ho otočit. Obrázek otočím a kliknu na "Nahraj". Výsledkem ale je, že se na server uloží obrázky dva - jeden otočený, ale v původním rozlišení a druhý v požadovaném rozlišení (šířka 650px) ale neotočený. Prosím o radu, jak to upravit, aby byl ve výsledku jen jeden obrázek, který bude zmenšený a zároveň otočený. Děkuji za tipy

index.php

<form method="post" action="upload.php" enctype="multipart/form-data">
    <input type="file" name="file" id="file_name" />
    <input type="hidden" name="rotation" id="rotation" value="0"/>
    <input type="submit" name="submit" value="Nahraj"/>
</form>

<div class="img-preview" style="display: none;">
    <button id="rleft">Left</button>
    <button id="rright">Right</button>
    <div id="imgPreview"></div>
</div>


<script>
 function filePreview(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#imgPreview + img').remove();
            $('#imgPreview').after('<img src="'+e.target.result+'" class="pic-view" width="300" height="auto"/>');
        };
        reader.readAsDataURL(input.files[0]);
        $('.img-preview').show();
    }else{
        $('#imgPreview + img').remove();
        $('.img-preview').hide();
    }
}

$("#file_name").change(function (){
    // Image preview
    filePreview(this);
});
</script>

<script>
$(function() {
            var rotation = 0;
            $("#rright").click(function() {
                rotation = (rotation -90) % 360;
                $(".pic-view").css({'transform': 'rotate('+rotation+'deg)'});
                
                if(rotation != 0){
                    $(".pic-view").css({'width': '300px', 'height': 'auto'});
                }else{
                    $(".pic-view").css({'width': 'auto', 'height': '300px'});
                }
                $('#rotation').val(rotation);
            });
            
            $("#rleft").click(function() {
                rotation = (rotation + 90) % 360;
                $(".pic-view").css({'transform': 'rotate('+rotation+'deg)'});
                
                if(rotation != 0){
                    $(".pic-view").css({'width': '300px', 'height': 'auto'});
                }else{
                    $(".pic-view").css({'width': 'auto', 'height': '300px'});
                }
                $('#rotation').val(rotation);
            });
        });
</script>       


upload.php
$username = $_SESSION['username'];
$uploadPath = 'uploads/'; 
$statusMsg = ''; 
$upload = 0; 

if(isset($_POST['submit'])){ 

include_once 'includes/getExtension.php';   //získat koncovku obrázku

    if(!empty($_FILES['file']['name'])){
     
        $fileName_pred = $_FILES['file']['name']; 
        $fileType = $_FILES['file']['type']; 
        $fileTemp = $_FILES['file']['tmp_name']; 
        $size = $_FILES['file']['size'];
        $ext = strtolower(getExtension($fileName_pred));
  
$kodovane_name = time(); 
$b4_j = microtime(1);
for ($i=0;$i<10000;$i++) {
    $serial = md5(json_encode($kodovane_name));
}       
$jen_kod = $serial.".".$ext;
$fileName = $username."_".$serial.".".$ext;

//zmenšení obrázku začátek
function compressImage($ext,$fileTemp,$uploadPath,$fileName,$newwidth)
{
    if($ext=="jpg" || $ext=="jpeg" )
    {
    $src = imagecreatefromjpeg($fileTemp);
    }
    else if($ext=="png")
    {
    $src = imagecreatefrompng($fileTemp);
    }
    else if($ext=="gif")
    {
    $src = imagecreatefromgif($fileTemp);
    }
    else
    {
    $src = imagecreatefrombmp($fileTemp);
    }
                                                                    
    list($width,$height)=getimagesize($fileTemp);
    $newheight=($height/$width)*$newwidth;
    $tmp=imagecreatetruecolor($newwidth,$newheight);
    imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);
    $filename_malej = $uploadPath.$newwidth.'_'.$fileName;
    imagejpeg($tmp,$filename_malej,1000);
    imagedestroy($tmp);
    return $filename_malej;
}
              $widthArray = array(650);   //zadej rozměr obrázku
                foreach($widthArray as $newwidth)
                {
        $filename_malej=compressImage($ext,$fileTemp,$uploadPath,$fileName,$newwidth);
                echo "<img src='".$filename_malej."' class='img'> <br/>";
                
                
                echo "<b>Width:</b> ".$newwidth."px  <br/>
                        <b>File Name:</br> ".$filename_malej."<br/><br/>";
}

//zmenšení obrázku konec 

//otočení obrázku začátek
         
        $filePath = $uploadPath.basename($fileName); 
        $allowTypes = array('image/png','image/jpg','image/jpeg','image/gif'); 
        if(in_array($fileType, $allowTypes)){ 
            $rotation = $_POST['rotation']; 
            if($rotation == -90 || $rotation == 270){ 
                $rotation = 90; 
            }elseif($rotation == -180 || $rotation == 180){ 
                $rotation = 180; 
            }elseif($rotation == -270 || $rotation == 90){ 
                $rotation = 270; 
            } 
             
            if(!empty($rotation)){ 
                switch($fileType){ 
                    case 'image/png': 
                        $source = imagecreatefrompng($fileTemp); 
                        break; 
                    case 'image/gif': 
                        $source = imagecreatefromgif($fileTemp); 
                        break; 
                    default: 
                        $source = imagecreatefromjpeg($fileTemp); 
                } 
                $imageRotate = imagerotate($source, $rotation, 0); 
                 
                switch($fileType){ 
                    case 'image/png': 
                        $upload = imagepng($imageRotate, $filePath); 
                        break; 
                    case 'image/gif': 
                        $upload = imagegif($imageRotate, $filePath); 
                        break; 
                    default: 
                        $upload = imagejpeg($imageRotate, $filePath); 
                } 
                  
            }
            
            elseif(move_uploaded_file($fileTemp, $filePath)){ 
                $upload = 1; 
            }else{ 
                $statusMsg = 'Nahrávání obrázku se nezdařilo, zkuste to znovu.'; 
            } 
      
    }else{ 
        $statusMsg = 'Vyberte soubor, který chcete nahrát.'; 
    } 
 //otočení obrázku konec
} 
  }  

if($upload == 1){ 

$insert_row = $mysqli->query("INSERT INTO `table`(`email`, `kodovani`, `cesta`) VALUES('$username', '$jen_kod', '$fileName')");
    
echo $fileName;
    echo '<h4>Image has been uploaded successfully</h4>'; 
    echo '<img src="'.$filePath.'" width="300" height="auto" />'; 
}else{ 
    echo '<h4>'.$statusMsg.'</h4>'; 
} 
lionel messi
Profil
zezula:

Vo funkcii compressImage vytváraš a ukladáš jeden zmenšený obrázok. Pri otáčaní však pracuješ s úplne pôvodným (čiže iným) obrázkom, ktorý užívateľ nahral na server. Vo switchi (riadky 85 – 94) nepracuj s $fileTemp, ale s $filename_malej. Obrázok stačí ukladať raz, a to na konci (po zmenšení a otočení).


Zopár ďalších postrehov:

for ($i=0;$i<10000;$i++) {
    $serial = md5(json_encode($kodovane_name));
}       

Prečo prepisuješ jednu hodnotu totožnou hodnotou 10 000-krát?

Keď si už vyčlenil logiku pre zmenšenie do jednej funkcie, nechceš vyčleniť logiku pre otáčanie takisto do samostatnej funkcie a logiku pre ukladanie výsledného obrázka úplne mimo týchto funkcií (trebárs do tretej funkcie) a podobne? Prečítaj si niečo o princípe Single responsibility.

PS: Možno môj komentár vyznieva príliš kriticky, mojím cieľom však je iba ťa usmerniť, na čom ďalej pracovať. Oceňujem, že si samoštúdiom vytvoril kód, ktorý sa takmer približuje želanému výsledku.
zezula
Profil
Díky moc ;-)
Trochu jsem to ještě poupravil a funguje to přesně jak jsem chtěl. Takže paráda, ještě jednou díky.
Ty funkce chápu jak myslíš, něco na tom bude.
Jak tam přepisuju tu hodnotu 10000x tak jsem to "jen" zapomněl smazat..něco jsem zkoušel a zůstalo to tam.
S pozdravem Zezula

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0