Upload Image, Crop, Resize, Add Watermarks, and Convert formats with jQuery Ajax and PHP
225   1  

Upload Image, Crop, Resize, Add Watermarks, and Convert formats with jQuery Ajax and PHP

  18 Dec 2017
  Coding Category
Upload Image, Crop, Resize, Add Watermarks, and Convert formats with jQuery Ajax and PHP

I do not use Photoshop for simple editing like crop, resize, add watermark and also convert formats, when I am a PHP Developer 💪 💪  And now, upload image with jQuery Ajax and then use PHP to edit it. Our images in this website use same codes. Let's fun 😃 😃


1. Let user to add an image in simple form. You can use Frameworks to beautify it:


<form id="image-form" enctype="multipart/form-data">

    <input type="file" name="imagefile" id="imagefile">

    <button type="submit" name="submit" id="image-submit">Save</button>

</form>



2. Upload it with jQuery Ajax. POST data to myapi.php and receive response to show user:


$('form#image-form').submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({

        url: './api/myapi.php',

        data: formData,

        type: 'POST',

        dataType: 'JSON',

        cache: false,

        processData: false,

        contentType: false,

        beforeSend: function() {

            $('#preloader').fadeIn('fast'); //show a loader for waiting

        },

        complete: function() {

            $('#preloader').fadeOut('fast'); //hide that loader

        },

        success: function (result) {

            if(result['status'] == 'OK') {

                alert("Your image was saved. Thank you 🙏🙏"); //you can use frameworks to beautify notifications

                document.getElementById("image-form").reset(); //reset form to add another image

            } else {

                alert("Sorry! Your image was not saved. Please try again 😔");

            }

        },

        error: function (xhr, status, error) {

            alert("Server Error! Your image was not saved. Please try again 😤");

        }

    });

    return false;

});



3. Check if user upload is OK and then edit image with PHP in myapi.php:


<?php

    header('Content-Type: application/json; charset=UTF-8');

    if(isset($_FILES["imagefile"]["type"])) { //check if user send a file

        $validextensions = array('jpeg', 'jpg','png'); //define our valid extensions

        $temporary = explode('.', $_FILES['imagefile']['name']); //exploade name of file to name and extension

        $file_extension = end($temporary); //save it's extension

        if ($_FILES['imagefile']['size'] < 5000000 && in_array($file_extension, $validextensions)) { //check size of file that smaller than 5MB and also format of that that in my valid extensions

            if ($_FILES['imagefile']['error'] > 0) { //if we have error send to jQuery Ajax

                echo 'File Error: ' . mysqli_error($db);

                $output['status'] = 'build_error';

            } else {

                $giliapps_id = 'giliapps' . $some_dynamic_var; //define a dynamic var to use for name of new image like post id or time and more

                $sourcePath = $_FILES['imagefile']['tmp_name']; //get source path of image

                list($width, $height) = getimagesize($_FILES['imagefile']['tmp_name']); //get width and height of image

                $ratio = $height / $width; //compute aspect ratio to prevent deformation

                $new_width = 1600; //define my new width

                $new_height = $new_width * $ratio; //compte new height with keeping aspect ratio

                $targetPath = "../images/" . $giliapps_id . "." . $file_extension; //define target path on server to save image

                move_uploaded_file($sourcePath, $targetPath); //send file from client to server

                $new_image = imagecreatetruecolor($new_width, $new_height); //define blank image with new width and height

                    if ($file_extension == 'png') { //check if that image is a PNG

                        $old_image = imagecreatefrompng($targetPath); //add our new PNG image on server to a var

                    } else {

                        $old_image = imagecreatefromjpeg($targetPath); //add our new JPG image on server to a var

                    }

                imagecopyresampled($new_image,$old_image,0,0,0,0,$new_width, $new_height, $width, $height); //insert exist image on server to our new blank image, that is CROP + RESIZE

                $targetPath2 = "../images/" . $giliapps_id . "-final.jpg"; //define a new path on server to save new image

                if ($file_extension == 'png') { //check if new cropped and resized image is a PNG or no

                    imagejpeg($new_image, $targetPath2, 100); //save new JPG image on server, that is CONVERT

                    unlink($targetPath); //remove unused PNG image

                } else {

                    imagejpeg($new_image, $targetPath2, 100); //save new JPG image on server

                }

                $o1 = imagecreatefrompng("../overlay1.png"); //define my first watermark PNG image

                $o2 = imagecreatefrompng("../overlay2.png"); //define my second watermark PNG image

                imagecopyresampled($new_image, $o1, 615, $new_height - 80, 0, 0, 985, 80, 985, 80); //add first watermark to right bottom of new image, that is ADD WATERMARK

                imagejpeg($new_image, $targetPath2, 100); //create another JPG file

                imagecopyresampled($new_image, $o2, 0, 0, 0, 0, 390, 105, 390, 105); //add second watermark to left top of new image

                imagejpeg($new_image, $targetPath2, 100); //create final JPG file

            }

        }

    }

?>

Author: Ismael Azaran

Do you like it? Share it with your friends.

Categories

Tags