Monday, January 7, 2019

Add Watermark to Image in PHP

In this post we are going to add watermark to an image in php.You may have visited sites where you upload any image and it adds website's watermark to image automatically, We will learn how can we achieve that in this post.

Add Watermark to Image in PHP
Ok so files we are going to need are index.php, which will hold the form content to upload image, process-watermark.php, which will be dealing with code that actually adds watermark to uploaded image and style.css, which will contain styles for index.php.

index.php

<!DOCTYPE html>
<html>
    <head>
        <title>Add Watermark to Image in PHP  - Demo</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <div class="main-container">
            <div class="section">
                <form action="process-watermark.php" method="POST" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-12">
                            <div class="conf-wrapper">
                                <label><input type="radio" name="position" value="repeat_all" checked="checked"> Repeat All</label>
                                <label><input type="radio" name="position" value="top_left"> Top Left</label>
                                <label><input type="radio" name="position" value="top_right"> Top Right</label>
                                <label><input type="radio" name="position" value="bottom_left"> Bottom Left</label>
                                <label><input type="radio" name="position" value="bottom_right"> Bottom Right</label>
                                <label><input type="radio" name="position" value="center"> Center</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <input type="file" class="file-input" name="image_file" />
                        </div>
                        <div class="col-xs-6 text-right">
                            <button type="submit" class="btn btn-blue"><i class="fa fa-upload"></i> Upload</button>
                        </div>
                    </div>
                </form>
                <?php if(file_exists('images/watermark-image.png')){?>
                <div class="row">
                    <div class="col-12">
                        <img src="images/watermark-image.png" class="img-responsive"/>
                    </div>
                </div>
                <?php }?>
            </div>
        </div>
    </body>
</html>

process-watermark.php

<?php
// If image was uploaded without any errors, Proceed to watermarking
if($_FILES && $_FILES['image_file']['error'] === 0){

    $file = $_FILES['image_file'];
    $type = substr($_FILES['image_file']['type'], 0,5);
    $file_size = number_format($_FILES['image_file']['size'] / 1024,2);

    if($type == 'image' && $file_size < 2048){
        $to_image = imagecreatefromstring(file_get_contents($file['tmp_name']));
        $stamp = imagecreatefrompng('images/watermark.png');
        $spacing = 15;
        $spacing_double = $spacing  * 2;

        list($width,$height) = getimagesize($file['tmp_name']);
        list($stamp_width,$stamp_height) = getimagesize('images/watermark.png');

        switch($_POST['position']){
            // Repeat watermark over whole image
            case "repeat_all":
                // calculate how many rows & columns watermark will repeat
                $rows = floor($height / ($stamp_height + $spacing_double));
                $cols = floor($width / ($stamp_width + $spacing_double));

                // Initial offset (point to start) of watermark
                $offsetX = ($width - ($cols * ($stamp_width + $spacing_double))) / 2 + $spacing;
                $offsetY = ($height - ($rows * ($stamp_height + $spacing_double))) / 2 + $spacing;

                // Loop through all rows & columns and place watermark
                for($rc = 0 ; $rc < $rows ; $rc++){
                   for($cc = 0; $cc < $cols; $cc++){
                        imagecopy($to_image, $stamp, $cc * ($stamp_width + $spacing_double) + $offsetX, $rc * ($stamp_height + $spacing_double) + $offsetY, 0, 0, $stamp_width, $stamp_height);
                    }
                }
                break;
            // Place watermark to top left of uploaded image
            case "top_left":
                $offsetX = $spacing;
                $offsetY = $spacing;
                imagecopy($to_image, $stamp, $offsetX, $offsetY, 0, 0, $stamp_width, $stamp_height);
                break;

            // Place watermark to top right of uploaded image
            case "top_right":
                $offsetX = $width - ($stamp_width + $spacing);
                $offsetY = $spacing;
                imagecopy($to_image, $stamp, $offsetX, $offsetY, 0, 0, $stamp_width, $stamp_height);
                break;

            // Place watermark to bottom left of uploaded image
            case "bottom_left":
                $offsetX = $spacing;
                $offsetY = $height - ($stamp_height + $spacing);
                imagecopy($to_image, $stamp, $offsetX, $offsetY, 0, 0, $stamp_width, $stamp_height);
                break;

            // Place watermark to bottom right of uploaded image
            case "bottom_right":
                $offsetX = $width - ($stamp_width + $spacing);
                $offsetY = $height - ($stamp_height + $spacing);
                imagecopy($to_image, $stamp, $offsetX, $offsetY, 0, 0, $stamp_width, $stamp_height);
                break;

            // Place watermark to center of uploaded image, Also the default case
            case "center":
            default:
                $offsetX = ($width  - ($stamp_width + $spacing)) / 2;
                $offsetY = ($height - ($stamp_height + $spacing)) / 2;
                imagecopy($to_image, $stamp, $offsetX, $offsetY, 0, 0, $stamp_width, $stamp_height);
                break;
        }
        // Save image after adding watermark
        imagepng($to_image, 'images/watermark-image.png', 9);
    }
}
header("Location: index.php");
?>

style.css

*{
    box-sizing: border-box;
}
html,body{
    margin: 0px;
    padding: 0px;
}
body{
    background: #f0f0f0;
    font: normal normal 14px Open Sans,Verdana, Arial;
}
.main-container{
    max-width: 1024px;
    margin: 0px auto;
}
.section {
    padding: 15px;
}
.text-right{
    text-align: right;
}
.row:before,
.row:after{
    content: "";
    display: table;
}
.row:after{
    clear:both;
}
.row{
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 15px;
}
[class*="col-"] {
    float: left;
    padding: 0px 10px;
}
.col-xs-6{
    width: 50%;
}
.col-12{
    width: 100%;
}
.img-responsive{
    max-width: 100%;
    height: auto;
}
.btn{
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
}
.btn-blue{
    background: #3c8dbc;
    border: 1px solid #2b7cab;
    color: #fff;
}
.conf-wrapper{
    background: #fff;
    padding: 10px;
}
.conf-wrapper label{
    display: inline-block;
    margin-right: 10px;
}