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

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 Funktion vor, mit der 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 oder Graustufen, 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
+ Bild in Farbe oder Graustufen änderbar
+ Bildgröße mit Schieberegler einstellbar
+ direkte Eingabe der Bildgröße möglich




Download der Dateien

Datei: create_gray_thumb.php
<?php

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

    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 && ($info[0] < $info[1])) 
    {
        
$width = ($height $info[1]) * $info[0];
    } 
    else 
    {
        
$height = ($width $info[0]) * $info[1];
    }

    if(!
$color)
        
imagefilter($imageIMG_FILTER_GRAYSCALE);
        
    
$imagetc imagecreatetruecolor($width$height);

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

    
imagejpeg($imagetc$newfile100);    
    
}    

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

?>



Datei: manipulator.php Anwendungsbeispiel

<?php

$showDownload 
false;
$picture 'tiere.jpg';
$picturepath 'pictures'.DIRECTORY_SEPARATOR.'tiere.jpg';
$width 500;
$height 250;
$maxWidth 100;
$maxHeight 100;
$newfile "";
$newfileweb "";
$checkcolor "checked";
$checkgray "";
$textwidthheight "";

$textDownload "";

if(
file_exists($picturepath)){
    
$size getimagesize($picturepath);
    
$textwidthheight $size[0] . 'x' $size[1] . ' px';
    
$maxWidth $size[0];
    
$maxHeight $size[1];
}

if ( isset(
$_POST["pic-width"]) )
{
    
    
$file 'pictures' DIRECTORY_SEPARATOR $_POST["picture"];
    
$newfile 'manipulated' DIRECTORY_SEPARATOR .  $_POST["colorradio"] . '-' 
    
$_POST["pic-width"] . 'x' $_POST["pic-height"] . '-'$_POST["picture"];
    
    
$newfileweb 'manipulated/' .  $_POST["colorradio"] . '-' $_POST["pic-width"] . 
    
'x' $_POST["pic-height"] . '-'$_POST["picture"];
    
    if(
file_exists($file)){
        
        
$width $_POST["pic-width"] + 0;
        
$height $_POST["pic-height"] + 0;
        
        if (
$_POST["colorradio"] == "color"){
            
$color true;
            
$checkcolor "checked";
            
$checkgray "";
            
$textDownload "Bild in Farbe downloaden";
        }
        else{
            
$color false;
            
$checkcolor "";
            
$checkgray "checked";
            
$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: <?php echo $maxWidth?>,
            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: <?php echo $maxHeight?>,
            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();

    });
</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: <?php echo $textwidthheight?>
    </p>

    <div style="float:left;border: 1px #999 solid;padding:1px;margin-top:15px;">
        <img src="thumb/<?php echo $picture?>">
    </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>
        </div>

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



Ausgabebeispiel: Browseransicht









 




:: Premium-Partner ::

Webhosting/Serverlösungen

Profihost AG weitere Premium-Partner
 

:: SELFPHP Sponsor ::

Sedo GmbH weitere Sponsoren
 


:: Buchempfehlung ::

Webseiten professionell erstellen

Webseiten professionell erstellen 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


Captcha – Der Unterschied zwischen Mensch und Maschine

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

SELFPHP Code Snippet


Zeitpunkt der Tabellenerstellung, Aktualisierung und Tabellenüberprüfung

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