Teil von  SELFPHP   Teil von  Code Snippets / PHP / Images
Professional CronJob-Service

Suche

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP  

 

:: SELFPHP Forum ::

Fragen rund um die Themen PHP?
In über 130.000 Beiträgen finden Sie sicher die passende Antwort!  

 

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!

Vorname: 
Name:
E-Mail:
 
 

:: Qozido ::

Die Bilderverwaltung mit Logbuch für Taucher und Schnorchler.   

 
 
Bildmanipulation mit PHP & jQuery v2

SELFPHP ist Shopware Solution Partner
Shopware ist ein vielfach ausgezeichnetes Onlineshop-System der shopware AG, das auf PHP. Zend Framework und SQL basiert.
SELFPHP unterstützt Sie als Shopware Solution Partner bei der Konzeption, Programmierung und Realisierung Ihres Onlineshops und passt Shopware bei Bedarf an Ihre Unternehmensbedürfnisse an. Weitere Informationen




Beispielaufgabe

Bildmanipulation mit PHP & jQuery



Beschreibung

Nachfolgend stellen wir Ihnen eine erweiterte Funktion von einem bereits vor einigen Monaten vorgestellten Programm vor, mit dem Sie komfortabel mittels Schieberegler die neue Bildgröße einer Datei einstellen können. Das neue Bild wird dabei proportional zu seiner Originalgröße erstellt, um die originalen Seitenverhältnisse beizubehalten.

Darüber hinaus besteht die Möglichkeit, das neu zu erstellende Bild, entweder in Farbe, Graustufen oder als Negativ, generieren zu lassen. Nach erfolgreicher Änderung des Bildes, erscheint dann neben dem Button "Bild generieren" ein weiterer Button für den Download des neuen Bildes.

Das neu erstellte Bild wird bei der Generierung direkt in ein Verzeichnis gespeichert und mit den Werten für die neue Größe und der Farbauswahl im Dateinamen gespeichert. Somit kann dieses Bild später erneut downgeloadet werden.

Für diese Funktion haben wir online auf SELFPHP eine Demo installiert. Somit können Sie vorab das Skript auf seine Wirkungsweise testen:
Demo anschauen

Folgende Möglichkeiten bietet die Funktion:
+ proportionale Bildverkleinerung (die neue Größe orientiert sich immer am höheren Wert (Breite oder Höhe))
+ Bild in Farbe, Graustufen oder als Negativ änderbar
+ Bild horizontal oder vertikal spiegeln
+ Bild um 90°, 180° oder 270° drehbar
+ Bildgröße mit Schieberegler einstellbar (proportionale Änderung, die neue Größe orientiert sich immer am höheren Wert (Breite oder Höhe))
+ direkte Eingabe der Bildgröße möglich




Download der Dateien

Datei: create_gray_thumb.php
<?php

/**
 *    Bildmanipulation
 *
 *    Systemvoraussetzung:
 *    Linux
 *    PHP 5
 *    GDlib
 *
 *
 *     LICENSE: BSD
 *
 *    @category   Grafik
 *    @author     SELFPHP OHG <info@selfphp.de>
 *    @copyright  2001-2013 SELFPHP
 *    @version    $Id: create_gray_thumb.php,v 0.10 2013/09/11 18:25:30 des1 Exp $
 *    @link       http://www.selfphp.de
 */
 
function resizePicture($file$newfile$width$height$color false$mirror 0$rotate 0)
{

    if(!
file_exists($file))
        return 
false;
    
    
$info getimagesize($file);

    if(
$info[2] == 1)
    {
        
$image imagecreatefromgif($file);
    }
    elseif(
$info[2] == 2)
    {
        
$image imagecreatefromjpeg($file);
    }
    elseif(
$info[2] == 3)
    {
        
$image imagecreatefrompng($file);
    }
    else
    {
            return 
false;
    }
    
    if (
$width $height
    {
        
$width = ($height $info[1]) * $info[0];
    } 
    else 
    {
        
$height = ($width $info[0]) * $info[1];
    }
        
    
$imagetc imagecreatetruecolor($width$height);

    
imagecopyresampled($imagetc$image0000$width$height$info[0], $info[1]);


    if(
$color == "gray")
        
imagefilter($imagetcIMG_FILTER_GRAYSCALE);
        
    if(
$color == "negativ")
        
$imagetc makeNegative($imagetc);
    
    if(
$mirror == 1)
        
$imagetc makeHorizontal($imagetc);
        
    if(
$mirror == 2)
        
$imagetc makeVertical($imagetc);
        
    if(
$rotate 0){
        
$rotate 360 $rotate;
        
$imagetc imagerotate($imagetc$rotate0);
    }
    
    
imagejpeg($imagetc$newfile100);    
    
}    

function 
makeNegative($rOrgImage){
    
    
$iOrgImageX imagesx($rOrgImage); 
    
$iOrgImageY imagesy($rOrgImage);
    
    
$rReturnImage imagecreatetruecolor$iOrgImageX$iOrgImageY );
    
    for ( 
$x 0$x $iOrgImageX$x++ )
  {
    for ( 
$y 0$y $iOrgImageY$y++ )
    {
      
$iCurrent imagecolorat $rOrgImage$x$y );

      
$iNegative $iCurrent 0xffffff;

      
imagesetpixel $rReturnImage$x$y$iNegative );
    }
  } 
  
  return 
$rReturnImage;
}

function 
makeHorizontal($rOrgImage){
    
    
$iOrgImageX imagesx($rOrgImage); 
    
$iOrgImageY imagesy($rOrgImage); 
    
    
$rReturnImage imagecreatetruecolor($iOrgImageX$iOrgImageY);
        
    
$coords = ($iOrgImageX 1);
    
    foreach(
range($iOrgImageX0) as $range){
        
        
$src_x $range;
        
$dst_x $coords $range;
        
imagecopy($rReturnImage$rOrgImage$dst_x0$src_x01$iOrgImageY);
    
    }

    return 
$rReturnImage;

}

function 
makeVertical($rOrgImage){
    
    
$iOrgImageX imagesx($rOrgImage); 
    
$iOrgImageY imagesy($rOrgImage);
    
    
$rReturnImage imagecreatetruecolor($iOrgImageX$iOrgImageY);
    
    
$coords = ($iOrgImageY 1);
    
    foreach(
range($iOrgImageY0) as $range){
        
        
$src_y $range;
        
$dst_y $coords $range;
        
imagecopy($rReturnImage$rOrgImage0$dst_y0$src_y$iOrgImageX1);
    
    }
    
    return 
$rReturnImage;
    
}


resizePicture($file$newfile$width$height$color$mirror$rotate);

?>



Datei: manipulator.php Anwendungsbeispiel

<?php

$showDownload 
false;
$picture 'tiere.jpg';
$width 500;
$height 250;
$newfile "";
$newfileweb "";
$checkcolor "checked";
$checkgray "";
$checknegativ "";
$checkmirror 0;
$checkrotate 0;
$textDownload "";

if ( isset(
$_POST["pic-width"]) )
{
    
    
$file 'pictures' DIRECTORY_SEPARATOR $_POST["picture"];
    
$newfile 'manipulated' DIRECTORY_SEPARATOR .  $_POST["colorradio"] . '-' 
    
$_POST["rotate"] . '-' $_POST["mirror"] . '-' $_POST["pic-width"] . 'x' 
    
$_POST["pic-height"] . '-'$_POST["picture"];
    
    
$newfileweb 'manipulated/' .  $_POST["colorradio"] . '-' $_POST["rotate"] . 
    
'-' $_POST["mirror"] . '-' $_POST["pic-width"] . 'x' $_POST["pic-height"] . 
    
'-'$_POST["picture"];
    
    if(
file_exists($file)){
        
        
$width $_POST["pic-width"] + 0;
        
$height $_POST["pic-height"] + 0;
        
$mirror $_POST["mirror"] + 0;
        
$rotate $_POST["rotate"] + 0;
        
        
$checkrotate $rotate;
        
$checkmirror $mirror;
        
        if (
$_POST["colorradio"] == "color"){
            
$color "color";
            
$checkcolor "checked";
            
$checkgray "";
            
$checknegativ "";
            
$textDownload "Bild in Farbe downloaden";
        }
        elseif(
$_POST["colorradio"] == "negativ"){
            
$color "negativ";
            
$checkcolor "";
            
$checkgray "";
            
$checknegativ "checked";
            
$textDownload "Bild als negativ downloaden";
        }
        else{
            
$color "gray";
            
$checkcolor "";
            
$checkgray "checked";
            
$checknegativ "";
            
$textDownload "Bild in Graustufen downloaden";
        }
        
        
            
        include_once(
"create_gray_thumb.php");
    }
        
    
    if(
file_exists($newfile))    
        
$showDownload true;
    
    
$width $_POST["pic-width"];
    
$height $_POST["pic-height"];
    
}    

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bildmanipulator</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

<script>
    $(function() {
    
        $( "#slider" ).slider({
            range: "min",
            min: 100,
            max: 1095,
            value: <?php echo $width?>,
            slide: function( event, ui ) {
                $( "#width" ).val( ui.value );
            }
        });

        $( "#width" ).val( $( "#slider" ).slider( "value" ) );

        $( "#slider-height" ).slider({
            range: "min",
            min: 100,
            max: 821,
            value: <?php echo $height?>,
            slide: function( event, ui ) {
                $( "#height" ).val( ui.value );
            }
        });

        $( "#height" ).val( $( "#slider-height" ).slider( "value" ) );


        $( "input[type=submit], a, button" )
            .button()
            .click(function( event ) {
                
        });

        $( "#radio" ).buttonset();
        $( "#mirror" ).buttonset();
        $( "#rotate" ).buttonset();
        
        
    $("#picsubmit").click(function () {
        $("#preloader").show();
        $("#downloadbutton").toggle();        
    });

   
        

    });
</script>

<style>
body {
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    font-size: 62.5%;
}
</style>
</head>
<body>

<div id="main" style="width: 600px;">
    <form name="manipulator" action="manipulator.php" method="POST">
    <p class="ui-state-default ui-corner-all" style="padding: 4px; margin-top: 4em;">
        <span class="ui-icon ui-icon-signal" style="float: left; margin: -2px 5px 0 0;"></span>
        Bildauswahl - Originalbild: 1095x821px
    </p>

    <div style="float:left;margin-top:15px;">
        <div style="border: 1px #999 solid;padding:1px;"><img src="thumb/<?php echo $picture?>"></div>
        <div id="preloader" style="display:none;text-align:center;"><img src="preloader.gif" style="margin-top:15px;">
        <br><br>Generiere Bild</div>
    </div>

    <div style="float:right">
        <p>
            <label for="width" style="color:#555;">Width:</label>
            <input type="text" id="width" name="pic-width" style="border: 0; color: #f6931f; font-weight: bold;" />
        </p>
        <div id="slider" style="height: 10px;width: 360px;margin-bottom: 20px;"></div>

        <p>
            <label for="height" style="color:#555;">Height:</label>
            <input type="text" id="height" name="pic-height" style="border: 0; color: #f6931f; font-weight: bold;" />
        </p>
        <div id="slider-height" style="height: 10px;width: 360px;"></div>

         <div id="radio" style="margin-top:20px;">
            <input type="radio" id="radio1" name="colorradio" value="color" <?php echo $checkcolor?>/>
            <label for="radio1">Farbe</label>
            <input type="radio" id="radio2" name="colorradio" value="gray" <?php echo $checkgray?>/>
            <label for="radio2">Graustufen</label>
            <input type="radio" id="radio3" name="colorradio" value="negativ" <?php echo $checknegativ?>/>
            <label for="radio3">Negativ</label>
        </div>
        
        <div id="mirror" style="margin-top:20px;">
            <input type="radio" id="mirror1" name="mirror" value="0" <?php if($checkmirror == 0){echo 'checked';} ?>/>
            <label for="mirror1">Ohne</label>
            <input type="radio" id="mirror2" name="mirror" value="1" <?php if($checkmirror == 1){echo 'checked';} ?>/>
            <label for="mirror2">Horizontal spiegeln</label>
            <input type="radio" id="mirror3" name="mirror" value="2" <?php if($checkmirror == 2){echo 'checked';} ?>/>
            <label for="mirror3">Vertikal spiegeln</label>
        </div>
        
        <div id="rotate" style="margin-top:20px;">
            <input type="radio" id="rotate1" name="rotate" value="0" <?php if($checkrotate == 0){echo 'checked';} ?>/>
            <label for="rotate1">Ohne</label>
            <input type="radio" id="rotate2" name="rotate" value="90" <?php if($checkrotate == 90){echo 'checked';} ?>/>
            <label for="rotate2">90°</label>
            <input type="radio" id="rotate3" name="rotate" value="180" <?php if($checkrotate == 180){echo 'checked';} ?>/>
            <label for="rotate3">180°</label>
            <input type="radio" id="rotate4" name="rotate" value="270" <?php if($checkrotate == 270){echo 'checked';} ?>/>
            <label for="rotate4">270°</label>
        </div>

        <input type="hidden" value="<?php echo $picture?>" name="picture" />
        <input style="margin-top:15px;margin-right:10px;" type="submit" id="picsubmit" value="Bild generieren" name="submit" />
        <?php if($showDownload){ ?>
            <a id="downloadbutton" style="margin-top:15px;" href="<?php echo $newfileweb?>" target="_blank">Bild anzeigen</a>
        <?php ?>
    </div>
    </form>
</div>
</body>
</html>



Ausgabebeispiel: Browseransicht









 




:: Premium-Partner ::

Webhosting/Serverlösungen

PSW GROUP GmbH & Co. KG weitere Premium-Partner
 

:: SELFPHP Sponsor ::

OptimaNet Schweiz AG weitere Sponsoren
 


:: Buchempfehlung ::

Der CSS-Problemlöser

Der CSS-Problemlöser zur Buchempfehlung
 

:: Anbieterverzeichnis ::

Webhosting/Serverlösungen

Suchen Sie den für Sie passenden IT-Dienstleister für Ihr Webhosting-Paket oder Ihre Serverlösung?

Sie sind nur ein paar Klicks davon entfernt!


 

Ausgewählter Tipp im Bereich PHP-Skripte


Zyklische Redundanzprüfung (CRC)

Weitere interessante Beispiele aus dem SELFPHP Kochbuch finden Sie im Bereich PHP-Skripte
 

SELFPHP Code Snippet


Byte in ein gut lesbares Format (abgekürzt) umrechnen (Binärpräfix)

Weitere interessante Code Snippets finden Sie auf SELFPHP im Bereich PHP Code Snippets
 
© 2001-2016 E-Mail SELFPHP OHG, info@selfphp.deImpressumKontakt