php resize image on or before upload

Question

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;
}
?>

Answer 1

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 .'" />';

?>

Answer 2

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);
            }


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

        }
?>

Answer 3

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++;

}