|
:: 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  |
|
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($image, IMG_FILTER_GRAYSCALE);
$imagetc = imagecreatetruecolor($width, $height);
imagecopyresampled($imagetc, $image, 0, 0, 0, 0, $width, $height, $info[0], $info[1]);
imagejpeg($imagetc, $newfile, 100);
}
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
|
|
|
|
|
|
:: 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!
|
SELFPHP
Code Snippets / PHP / Images
SELFPHP Inh. Damir Enseleit, info@selfphp.de, Impressum, Kontakt