8

how would i resize the image before or during the upload?

    <?php
     // Start a session for error reporting
    session_start();
    ?>
     <?php
    // Check, if username session is NOT set then this page will jump to login page
if (!isset($_SESSION['username'])) {
        header('Location: index.html');
        exit;
}
// *** Include the class
    include("resize-class.php");


// Call our connection file
include('config.php');

// Check to see if the type of file uploaded is a valid image type
function is_valid_type($file)
{
    // This is an array that holds all the valid image MIME types
    $valid_types = array("image/jpg", "image/JPG", "image/jpeg", "image/bmp", "image/gif", "image/png");

    if (in_array($file['type'], $valid_types))
        return 1;
    return 0;
}

// Just a short function that prints out the contents of an array in a manner that's easy to read
// I used this function during debugging but it serves no purpose at run time for this example
function showContents($array)
{
    echo "<pre>";
    print_r($array);
    echo "</pre>";
}

// Set some constants
// Grab the User ID we sent from our form
$user_id = $_SESSION['username'];
$category = $_POST['category'];

// This variable is the path to the image folder where all the images are going to be stored
// Note that there is a trailing forward slash
$TARGET_PATH = "img/users/$category/$user_id/";
if (! is_dir($TARGET_PATH)) {
    mkdir($TARGET_PATH, 0775, true);
}

// Get our POSTed variables
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$contact = $_POST['contact'];
$price = $_POST['price'];
$conditional = $_POST['conditional'];
$image = $_FILES['image'];


// Build our target path full string.  This is where the file will be moved do
// i.e.  images/picture.jpg
$TARGET_PATH .= $image['name'];

// Make sure all the fields from the form have inputs
if ( $fname == "" || $lname == "" || $image['name'] == "" || $category['category'] == "" || $conditional['conditional'] == "" || $price['price'] == "" )
{
    $_SESSION['error'] = "All fields required";
    header("Location: securedpage1.php");
    exit;
}

// Check to make sure that our file is actually an image
// You check the file type instead of the extension because the extension can easily be faked
if (!is_valid_type($image))
{
    $_SESSION['error'] = "You must upload a jpeg, gif, or bmp";
    header("Location: securedpage1.php");
    exit;
}

// Here we check to see if a file with that name already exists
// You could get past filename problems by appending a timestamp to the filename and then continuing
if (file_exists($TARGET_PATH))
{
    $_SESSION['error'] = "A file with that name already exists";
    header("Location: securedpage1.php");
    exit;
}


// Lets attempt to move the file from its temporary directory to its new home
if (move_uploaded_file($image['tmp_name'], $TARGET_PATH))
{
    // NOTE: This is where a lot of people make mistakes.
    // We are *not* putting the image into the database; we are putting a reference to the file's location on the server

    $imagename = $image['name'];


    $sql = "insert into people (price, contact, category, username, fname, lname, expire, filename, conditional, posttime) values (:price, :contact, :category, :user_id, :fname, :lname, now() + INTERVAL 1 MONTH, :imagename, :conditional, now())";
                                $q = $conn->prepare($sql) or die("failed!");
                                $q->bindParam(':price', $price, PDO::PARAM_STR);
                                $q->bindParam(':contact', $contact, PDO::PARAM_STR);
                                $q->bindParam(':category', $category, PDO::PARAM_STR);
                                $q->bindParam(':user_id', $user_id, PDO::PARAM_STR);
                                $q->bindParam(':fname', $fname, PDO::PARAM_STR);
                                $q->bindParam(':lname', $lname, PDO::PARAM_STR);
                                $q->bindParam(':imagename', $imagename, PDO::PARAM_STR);
                                $q->bindParam(':conditional', $conditional, PDO::PARAM_STR);
                                $q->execute();


    $sql1 = "UPDATE people SET firstname = (SELECT firstname FROM user WHERE username=:user_id1) WHERE username=:user_id2";
                                $q = $conn->prepare($sql1) or die("failed!");
                                $q->bindParam(':user_id1', $user_id, PDO::PARAM_STR);
                                $q->bindParam(':user_id2', $user_id, PDO::PARAM_STR);
                                $q->execute();


    $sql2 = "UPDATE people SET surname = (SELECT surname FROM user WHERE username=:user_id1) WHERE username=:user_id2";
                                $q = $conn->prepare($sql2) or die("failed!");
                                $q->bindParam(':user_id1', $user_id, PDO::PARAM_STR);
                                $q->bindParam(':user_id2', $user_id, PDO::PARAM_STR);
                                $q->execute();


    header("Location: success.php");
    exit;
}
else
{
    // A common cause of file moving failures is because of bad permissions on the directory attempting to be written to
    // Make sure you chmod the directory to be writeable
    $_SESSION['error'] = "Could not upload file.  Check read/write permissions on the directory";
    header("Location: securedpage1.php");
    exit;
}
?>
neeko
  • 1,930
  • 8
  • 44
  • 67
  • 2
    This code is not safe. Do not assume the type passed in from the client is actually the type of the uploaded file. Also, it isn't entirely clear what you want to do. – Brad Oct 06 '12 at 05:28
  • @Brad thankyou for your reply, how would i improve it to make it safer? Also, this is an image upload script, i would like to resize the image if the resolution is too big – neeko Oct 06 '12 at 05:29
  • 1
    use [`imagecopyresized`](http://www.php.net/manual/en/function.imagecopyresized.php) to resize the image. – air4x Oct 06 '12 at 05:30
  • 1
    @neeko, Just check the file type yourself. If you are expecting an image, make sure you can load it as one. Also, never keep user-uploaded files in the document root. Never let users pick the file name. Don't save user-uploaded stuff with a file-name extension. – Brad Oct 06 '12 at 05:30
  • okay, where would i store it instead? – neeko Oct 06 '12 at 05:31
  • @air4x thanks, how do i use this? – neeko Oct 06 '12 at 05:33

3 Answers3

22

Try this code this may help you

in this variable $resizeObj = new resize('sample.png'); you need to link your uploaded picture url

Imagerezise.php

<?php

    // *** Include the class
    include("resize-class.php");

    // *** 1) Initialise / load image
    $resizeObj = new resize('sample.png');

    // *** 2) Resize image (options: exact, portrait, landscape, auto, crop)
    $resizeObj -> resizeImage(200, 200, 'crop');

    // *** 3) Save image
    $resizeObj -> saveImage('sample-resizeda.jpg', 1000);

?>

resize-class.php

<?php

   # ========================================================================#
   #  Requires : Requires PHP5, GD library.
   #  Usage Example:
   #                     include("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);
            }


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

        }
?>
blex
  • 24,941
  • 5
  • 39
  • 72
Varun Sridharan
  • 1,983
  • 2
  • 20
  • 54
  • `$resizeObj = new resize('sample.png');` this looks for server location of the image. But i wanted to resize from local image and upload – logan Mar 09 '14 at 12:06
  • 1
    Sir, for that you need to create a upload script and the you need to link like this `$resizeObj = new resize($_FILES['files']['temp_name']);` for upload script please refer this http://stackoverflow.com/questions/11839127/php-video-upload-script/11839169#11839169 if you have any questions feel free to ask – Varun Sridharan Mar 11 '14 at 04:11
  • `$_FILES['files']['temp_name']` itself the temporary path of uploaded image. we should resize it before it is getting stored in temp path – logan Mar 11 '14 at 09:07
  • 1
    I think there is no possibility in php for your requirement / you may try using jquery – Varun Sridharan Mar 11 '14 at 09:26
  • ya., thats what i did for my requirement. This question is also asking about `resize before upload` ; so thought of asking you. – logan Mar 11 '14 at 12:44
  • @logan before upload is only possible using jquery crop plugin but for after upload its possible using php.. any way thanks for your comment – Varun Sridharan Mar 12 '14 at 02:10
  • Is it possible to make png background transparency? – NineCattoRules Oct 19 '16 at 10:43
  • @SimonLeCat Not sure if its possible. – Varun Sridharan Nov 01 '16 at 01:49
  • Thanks Mr.Varun, It's working for me also...But i have doubt in last line save image. Incase we have to change the name every time then how can we do this? because now it is saving same name and i have more than one image and i am gettin error file name already existed.Would you help me in this? – Naren Verma Jan 26 '17 at 18:05
  • @Varun Hey, I was trying to use your class and I'm getting some errors when trying to perform the resize on $_FILES['file']['tmp_name']. specifically: imagesx() expects parameter 1 to be resource, boolean given in xxxxx/xxxxx/xxxxxxx.php on line 24 and imagesy() expects parameter 1 to be resource, boolean given in xxxxx/xxxxx/xxxxxxx.php on line 24 and imagecopyresampled() expects parameter 2 to be resource, boolean given in line 67. any idea why it can't read the temp file? any help is greatly appreciated – cnapsys Sep 02 '17 at 21:57
  • @cnapsys I was having an issue trying to resize on the `$_FILES['file']['tmp_name']`, I think the problem is that the extension is .tmp so is returning false on the `openImage` switch. Try `if(\move_uploaded_file($_FILES['file']['tmp_name'], $thumb_dir)){` then do the resizing and replace the original image – lugreen Nov 29 '17 at 19:27
  • Just a note to add that this worked 'out of box' with an upload form for my application - just had to change the input file name to $_FILES['file']['tmp_name'] , adjusting for the file upload form name. Huzzah and an up-vote ! – Rick Hellewell Mar 19 '21 at 17:25
  • When you save the image and you pass 2nd parameter, that should be maximum "100" Wrong: $resizeObj -> saveImage('sample-resizeda.jpg', 1000); Correct: $resizeObj -> saveImage('sample-resizeda.jpg', 100); – NVG May 05 '21 at 07:29
0

This is the way to add multiple images using Ajax.

 var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    var formElement = document.getElementById("frmpoimgregistration");
    var formElement;
    var formData= new FormData(formElement);

     xmlhttp.open("post","Controller/User/Uploadlogo_controller.php",false);

    xmlhttp.send(formData);
    var counter = 0;
    while (xmlhttp.readyState != 4){
        counter = counter + 1;
    }
      var errorCondition =  xmlhttp.responseText;

if(errorCondition)
{
$("#image").append('<div class="imgup" id="'+count+'"><img class="po_images" src="'+errorCondition+'" style="width:137px; float:left"/></div>' );





    count++;

}
Gopinath
  • 67
  • 1
  • 3
  • Great and i would have given you a +1 if only you had explained the content of `Controller/User/Uploadlogo_controller.php`. How is your upload handled ? – John Max Oct 14 '16 at 10:52
0

Here is a full working code - my take on combining between the Java script image resize, and the php upload (This is not really upload but actually creating the image on the server, using the data that the Javas cript generated)

index.html

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
var fileReader = new FileReader();
var filterType = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

fileReader.onload = function (event) {
  var image = new Image();
  
  image.onload=function(){
      document.getElementById("original-Img").src=image.src;
      var canvas=document.createElement("canvas");
      var context=canvas.getContext("2d");
      canvas.width=image.width/4;
      canvas.height=image.height/4;
      context.drawImage(image,
          0,
          0,
          image.width,
          image.height,
          0,
          0,
          canvas.width,
          canvas.height
      );
      
      document.getElementById("upload-Preview").src = canvas.toDataURL();
  }
  image.src=event.target.result;
};

var loadImageFile = function () {
  var uploadImage = document.getElementById("upload-Image");
  
  //check and retuns the length of uploded file.
  if (uploadImage.files.length === 0) { 
    return; 
  }
  
  //Is Used for validate a valid file.
  var uploadFile = document.getElementById("upload-Image").files[0];
  if (!filterType.test(uploadFile.type)) {
    alert("Please select a valid image."); 
    return;
  }
  
  fileReader.readAsDataURL(uploadFile);
}
    

function step1()
{
  var base64image = $('#upload-Preview').attr('src');
  $("#imgsrc").val(base64image);
}

</script>
</head>

<body onload="loadImageFile();">
  <form name="uploadForm" action="upload.php" method="post">
    <table>
      <tbody>
        <tr>
          <td>Select Image - <input id="upload-Image" type="file" onchange="loadImageFile();" /></td>
        </tr>
        <tr>
          <td>Origal Img - <img id="original-Img"/></td>
        </tr>
         <tr>
          <td>Compress Img - <img name="upload-Preview" id="upload-Preview"/></td>
        </tr>
       
      </tbody>
    </table>
    <button type="button" onclick="step1();">step 1</button>
    <input id="imgsrc" name="imgsrc">
    <input type="submit" name="" value="step 2">
  </form>
</body>
</html>

upload.php

<?
    $img = $_POST['imgsrc'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    
    $data = base64_decode($img);
    $file = "image.png";
    $success = file_put_contents($file, $data);
    
    //reading from file: 

    echo '<img src="image.png" />';

    //reading from text variable/ database (in case yousaved the text in the db as a field)

    echo '<img src="data:image/png;base64,'. $img .'" />';

?>
user3495363
  • 349
  • 2
  • 11