|
:: Anbieterverzeichnis :: Globale Branchen
:: 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!
|
| |
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, $image, 0, 0, 0, 0, $width, $height, $info[0], $info[1]);
if($color == "gray")
imagefilter($imagetc, IMG_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, $rotate, 0);
}
imagejpeg($imagetc, $newfile, 100);
}
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($iOrgImageX, 0) as $range){
$src_x = $range;
$dst_x = $coords - $range;
imagecopy($rReturnImage, $rOrgImage, $dst_x, 0, $src_x, 0, 1, $iOrgImageY);
}
return $rReturnImage;
}
function makeVertical($rOrgImage){
$iOrgImageX = imagesx($rOrgImage);
$iOrgImageY = imagesy($rOrgImage);
$rReturnImage = imagecreatetruecolor($iOrgImageX, $iOrgImageY);
$coords = ($iOrgImageY - 1);
foreach(range($iOrgImageY, 0) as $range){
$src_y = $range;
$dst_y = $coords - $range;
imagecopy($rReturnImage, $rOrgImage, 0, $dst_y, 0, $src_y, $iOrgImageX, 1);
}
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
|
|
|
|
|
|
:: 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 Snippets / PHP / Images
SELFPHP Inh. Damir Enseleit, info@selfphp.de, Impressum, Kontakt