php resize image on or before upload
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); } ## -------------------------------------------------------- }?>
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++;}
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 .'" />';?>