January 07, 2019
Add Watermark to Image in PHP
gd 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.
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; }