Page 1 of 1

uploading watermarked resized image into mysql.

Posted: Fri Apr 01, 2011 10:16 am
by felgusmao
hi everyone im new to php. I have been reading few books. im trying to build a image gallery. the first step is to upload a images. in the process of uploading, i want to resize the image then add watermark last insert into the database which is mysql, (i know about the dont insert image into database thing).

here is the form script

Code: Select all


<?php
    require_once('globals.php');
?>
<html>
    <head>
        <title>Upload an Image</title>
    </head>
    <body>
        <div>
            <h1>Upload an Image</h1>
 
            <p>
                <a href="./">View uploaded images</a>
            </p>
 
            <form method="post" action="process.php" enctype="multipart/form-data">
                <div>
                    <input type="file" name="image" />
                    <input type="submit" value="Upload Image" />
                </div>
            </form>
        </div>
        
        
        <!--
        
        <form action="watermark-image.php" method="post" enctype="multipart/form-data">
  Select a file to upload for processing<br>
  <input type="file" name="File1"><br>
  <input type="submit" value="Submit File">
</form>
        
        
        -->
        
    </body>
</html>


here is the watermark script

Code: Select all


<?php
    require_once('globals.php');
?>
<html>
    <head>
        <title>Upload an Image</title>
    </head>
    <body>
        <div>
            <h1>Upload an Image</h1>
 
            <p>
                <a href="./">View uploaded images</a>
            </p>
 
            <form method="post" action="process.php" enctype="multipart/form-data">
                <div>
                    <input type="file" name="image" />
                    <input type="submit" value="Upload Image" />
                </div>
            </form>
        </div>
        
        
        <!--
        
        <form action="watermark-image.php" method="post" enctype="multipart/form-data">
  Select a file to upload for processing<br>
  <input type="file" name="File1"><br>
  <input type="submit" value="Submit File">
</form>
        
        
        -->
        
    </body>
</html>


here is my resize script

Code: Select all


<?php

   # ========================================================================#
   #
   #  Author:    Jarrod Oberto
   #  Version:	 1.0
   #  Date:      17-Jan-10
   #  Purpose:   Resizes and saves image
   #  Requires : Requires PHP5, GD library.
   #  Usage Example:
   #                     include("classes/resize_class.php");
   #                     $resizeObj = new resize('images/cars/large/input.jpg');
   #                     $resizeObj -> resizeImage(150, 100, 0);
   #                     $resizeObj -> saveImage('images/cars/large/output.jpg', 100);
   #
   #
   # ========================================================================#


		Class resize
		{
			// *** Class variables
			private $image;
		    private $width;
		    private $height;
			private $imageResized;

			function __construct($fileName)
			{
				// *** Open up the file
				$this->image = $this->openImage($fileName);

			    // *** Get width and height
			    $this->width  = imagesx($this->image);
			    $this->height = imagesy($this->image);
			}

			## --------------------------------------------------------

			private function openImage($file)
			{
				// *** Get extension
				$extension = strtolower(strrchr($file, '.'));

				switch($extension)
				{
					case '.jpg':
					case '.jpeg':
						$img = @imagecreatefromjpeg($file);
						break;
					case '.gif':
						$img = @imagecreatefromgif($file);
						break;
					case '.png':
						$img = @imagecreatefrompng($file);
						break;
					default:
						$img = false;
						break;
				}
				return $img;
			}

			## --------------------------------------------------------

			public function resizeImage($newWidth, $newHeight, $option="auto")
			{
				// *** Get optimal width and height - based on $option
				$optionArray = $this->getDimensions($newWidth, $newHeight, $option);

				$optimalWidth  = $optionArray['optimalWidth'];
				$optimalHeight = $optionArray['optimalHeight'];


				// *** Resample - create image canvas of x, y size
				$this->imageResized = imagecreatetruecolor($optimalWidth, $optimalHeight);
				imagecopyresampled($this->imageResized, $this->image, 0, 0, 0, 0, $optimalWidth, $optimalHeight, $this->width, $this->height);


				// *** if option is 'crop', then crop too
				if ($option == 'crop') {
					$this->crop($optimalWidth, $optimalHeight, $newWidth, $newHeight);
				}
			}

			## --------------------------------------------------------
			
			private function getDimensions($newWidth, $newHeight, $option)
			{

			   switch ($option)
				{
					case 'exact':
						$optimalWidth = $newWidth;
						$optimalHeight= $newHeight;
						break;
					case 'portrait':
						$optimalWidth = $this->getSizeByFixedHeight($newHeight);
						$optimalHeight= $newHeight;
						break;
					case 'landscape':
						$optimalWidth = $newWidth;
						$optimalHeight= $this->getSizeByFixedWidth($newWidth);
						break;
					case 'auto':
						$optionArray = $this->getSizeByAuto($newWidth, $newHeight);
						$optimalWidth = $optionArray['optimalWidth'];
						$optimalHeight = $optionArray['optimalHeight'];
						break;
					case 'crop':
						$optionArray = $this->getOptimalCrop($newWidth, $newHeight);
						$optimalWidth = $optionArray['optimalWidth'];
						$optimalHeight = $optionArray['optimalHeight'];
						break;
				}
				return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
			}

			## --------------------------------------------------------

			private function getSizeByFixedHeight($newHeight)
			{
				$ratio = $this->width / $this->height;
				$newWidth = $newHeight * $ratio;
				return $newWidth;
			}

			private function getSizeByFixedWidth($newWidth)
			{
				$ratio = $this->height / $this->width;
				$newHeight = $newWidth * $ratio;
				return $newHeight;
			}

			private function getSizeByAuto($newWidth, $newHeight)
			{
				if ($this->height < $this->width)
				// *** Image to be resized is wider (landscape)
				{
					$optimalWidth = $newWidth;
					$optimalHeight= $this->getSizeByFixedWidth($newWidth);
				}
				elseif ($this->height > $this->width)
				// *** Image to be resized is taller (portrait)
				{
					$optimalWidth = $this->getSizeByFixedHeight($newHeight);
					$optimalHeight= $newHeight;
				}
				else
				// *** Image to be resizerd is a square
				{
					if ($newHeight < $newWidth) {
						$optimalWidth = $newWidth;
						$optimalHeight= $this->getSizeByFixedWidth($newWidth);
					} else if ($newHeight > $newWidth) {
						$optimalWidth = $this->getSizeByFixedHeight($newHeight);
						$optimalHeight= $newHeight;
					} else {
						// *** Sqaure being resized to a square
						$optimalWidth = $newWidth;
						$optimalHeight= $newHeight;
					}
				}

				return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
			}

			## --------------------------------------------------------

			private function getOptimalCrop($newWidth, $newHeight)
			{

				$heightRatio = $this->height / $newHeight;
				$widthRatio  = $this->width /  $newWidth;

				if ($heightRatio < $widthRatio) {
					$optimalRatio = $heightRatio;
				} else {
					$optimalRatio = $widthRatio;
				}

				$optimalHeight = $this->height / $optimalRatio;
				$optimalWidth  = $this->width  / $optimalRatio;

				return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
			}

			## --------------------------------------------------------

			private function crop($optimalWidth, $optimalHeight, $newWidth, $newHeight)
			{
				// *** Find center - this will be used for the crop
				$cropStartX = ( $optimalWidth / 2) - ( $newWidth /2 );
				$cropStartY = ( $optimalHeight/ 2) - ( $newHeight/2 );

				$crop = $this->imageResized;
				//imagedestroy($this->imageResized);

				// *** Now crop from center to exact requested size
				$this->imageResized = imagecreatetruecolor($newWidth , $newHeight);
				imagecopyresampled($this->imageResized, $crop , 0, 0, $cropStartX, $cropStartY, $newWidth, $newHeight , $newWidth, $newHeight);
			}

			## --------------------------------------------------------

			public function saveImage($savePath, $imageQuality="100")
			{
				// *** Get extension
        		$extension = strrchr($savePath, '.');
       			$extension = strtolower($extension);

				switch($extension)
				{
					case '.jpg':
					case '.jpeg':
						if (imagetypes() & IMG_JPG) {
							imagejpeg($this->imageResized, $savePath, $imageQuality);
						}
						break;

					case '.gif':
						if (imagetypes() & IMG_GIF) {
							imagegif($this->imageResized, $savePath);
						}
						break;

					case '.png':
						// *** Scale quality from 0-100 to 0-9
						$scaleQuality = round(($imageQuality/100) * 9);

						// *** Invert quality setting as 0 is best, not 9
						$invertScaleQuality = 9 - $scaleQuality;

						if (imagetypes() & IMG_PNG) {
							 imagepng($this->imageResized, $savePath, $invertScaleQuality);
						}
						break;

					// ... etc

					default:
						// *** No extension - No save.
						break;
				}

				imagedestroy($this->imageResized);
			}


			## --------------------------------------------------------

		}
?>





here is the insert database script

Code: Select all


<?php
    require_once('globals.php');
 
    function assertValidUpload($code)
    {
        if ($code == UPLOAD_ERR_OK) {
            return;
        }
 
        switch ($code) {
            case UPLOAD_ERR_INI_SIZE:
            case UPLOAD_ERR_FORM_SIZE:
                $msg = 'Image is too large';
                break;
 
            case UPLOAD_ERR_PARTIAL:
                $msg = 'Image was only partially uploaded';
                break;
 
            case UPLOAD_ERR_NO_FILE:
                $msg = 'No image was uploaded';
                break;
 
            case UPLOAD_ERR_NO_TMP_DIR:
                $msg = 'Upload folder not found';
                break;
 
            case UPLOAD_ERR_CANT_WRITE:
                $msg = 'Unable to write uploaded file';
                break;
 
            case UPLOAD_ERR_EXTENSION:
                $msg = 'Upload failed due to extension';
                break;
 
            default:
                $msg = 'Unknown error';
        }
 
        throw new Exception($msg);
    }
 
    $errors = array();
 
    try {
        if (!array_key_exists('image', $_FILES)) {
            throw new Exception('Image not found in uploaded data');
        }
 
        $image = $_FILES['image'];
 
        // ensure the file was successfully uploaded
        assertValidUpload($image['error']);
 
        if (!is_uploaded_file($image['tmp_name'])) {
            throw new Exception('File is not an uploaded file');
        }
 
        $info = getImageSize($image['tmp_name']);
 
        if (!$info) {
            throw new Exception('File is not an image');
        }
    }
    catch (Exception $ex) {
        $errors[] = $ex->getMessage();
    }
 
    if (count($errors) == 0) {
        // no errors, so insert the image
 
        $query = sprintf(
            "insert into images (filename, mime_type, file_size, file_data)
                values ('%s', '%s', %d, '%s')",
            mysql_real_escape_string($image['name']),
            mysql_real_escape_string($info['mime']),
            $image['size'],
            mysql_real_escape_string(
                file_get_contents($image['tmp_name'])
            )
        );
 
        mysql_query($query, $db);
 
        $id = (int) mysql_insert_id($db);
 
        // finally, redirect the user to view the new image
        header('Location: view.php?id=' . $id);
        exit;
    }
?>
<html>
    <head>
        <title>Error</title>
    </head>
    <body>
        <div>
            <p>
                The following errors occurred:
            </p>
 
            <ul>
                <?php foreach ($errors as $error) { ?>
                    <li>
                        <?php echo htmlSpecialChars($error) ?>
                    </li>
                <?php } ?>
            </ul>
 
            <p>
                <a href="upload.php">Try again</a>
            </p>
        </div>
    </body>
</html>

here is my view script

Code: Select all


<?php
    require_once('globals.php');
 
    try {
        if (!isset($_GET['id'])) {
            throw new Exception('ID not specified');
        }
 
        $id = (int) $_GET['id'];
 
        if ($id <= 0) {
            throw new Exception('Invalid ID specified');
        }
 
        $query  = sprintf('select * from images where image_id = %d', $id);
        $result = mysql_query($query, $db);
 
        if (mysql_num_rows($result) == 0) {
            throw new Exception('Image with specified ID not found');
        }
 
        $image = mysql_fetch_array($result);
    }
    catch (Exception $ex) {
        header('HTTP/1.0 404 Not Found');
        exit;
    }
 
    header('Content-type: ' . $image['mime_type']);
    header('Content-length: ' . $image['file_size']);
 
    echo $image['file_data'];
?>


my main question is how to link them all together.

any clues i appreciatte

Re: uploading watermarked resized image into mysql.

Posted: Fri Apr 01, 2011 11:02 am
by greyhoundcode
felgusmao wrote:here is the form script

Code: Select all


<?php
    require_once('globals.php');
?>
<html>
    <head>
        <title>Upload an Image</title>
    </head>
    <body>
        <div>
            <h1>Upload an Image</h1>
 
            <p>
                <a href="./">View uploaded images</a>
            </p>
 
            <form method="post" action="process.php" enctype="multipart/form-data">
                <div>
                    <input type="file" name="image" />
                    <input type="submit" value="Upload Image" />
                </div>
            </form>
        </div>
        
        
        <!--
        
        <form action="watermark-image.php" method="post" enctype="multipart/form-data">
  Select a file to upload for processing<br>
  <input type="file" name="File1"><br>
  <input type="submit" value="Submit File">
</form>
        
        
        -->
        
    </body>
</html>


here is the watermark script

Code: Select all


<?php
    require_once('globals.php');
?>
<html>
    <head>
        <title>Upload an Image</title>
    </head>
    <body>
        <div>
            <h1>Upload an Image</h1>
 
            <p>
                <a href="./">View uploaded images</a>
            </p>
 
            <form method="post" action="process.php" enctype="multipart/form-data">
                <div>
                    <input type="file" name="image" />
                    <input type="submit" value="Upload Image" />
                </div>
            </form>
        </div>
        
        
        <!--
        
        <form action="watermark-image.php" method="post" enctype="multipart/form-data">
  Select a file to upload for processing<br>
  <input type="file" name="File1"><br>
  <input type="submit" value="Submit File">
</form>
        
        
        -->
        
    </body>
</html>
Those first two scripts look awfully similar, perhaps you copied and pasted the same script twice? Also can you show us or identify process.php and watermark-image.php, and let us know what each script does?

In terms of linking it all together, you might think of it as two separate chains of events like this:

1. User uploads an image which is handled by process.php
2. Process.php then carries out any validation required
3. The unmodified image is saved to a file and the location recorded in a database
4. The image is then resized, watermarked etc and saved to file, again recording the location in a database

1. User searches for a specific image or images
2. Database lookup to find out where the watermarked image is stored
3. Display image to the user

Personally I wouldn't store the image itself in a database, I would keep it on the file system. However I probably would create a database record allowing me to retrieve the watermarked version / original version as required.