Friday, July 24, 2015

Membuat watermark ketika upload gambar

Membuat watermark ketika upload gambar di website dengan php bisa diterapkan pada website yang kita buat dengan koding yang sederhana dibawah ini. Pada tutorial kali ini saya menggunakan wampserver sebagai server di localhost, dan untuk membuat file php menggunakan notepad bawaan windows.
  1. Pastikan wampserver telah berfunsi dengan baik.
  2. Sediakan terlebih dahulu gambar watermarknya. gambar watermark bisa dibuat menggunakan photoshop atau software edit gambar lainnya.
  3. Buat file fungsi_watermark.php dengan menggunakan editor php atau bisa menggunakan notepad. Salin kode dibawah ini :
    <?php
    $image_path = "watermark.png";
    function watermark_image($uploadx){
        global $image_path;
        //directori gambar
        $dirImage="images/";
        $name = strtolower($_FILES['file_upload']['name']);
        list($txt, $ext) = explode(".", $name);
        $tmp = $_FILES['file_upload']['tmp_name'];
        if($ext=="jpg" || $ext=="jpeg"){$src = imagecreatefromjpeg($tmp);}
        else if($ext=="png"){$src = imagecreatefrompng($tmp);}
        list($src_width, $src_height) = getimagesize($tmp);
        //identitas file asli
        $src_width = imageSX($src);
        $src_height = imageSY($src);
        //Simpan dalam versi 500 pixel
        $dst_width = 500;
        $dst_height = ($dst_width/$src_width)*$src_height;
        $im = imagecreatetruecolor($dst_width, $dst_height);
        imagecopyresampled($im, $src, 0, 0, 0, 0, $dst_width, $dst_height, $src_width, $src_height);
        $watermark = imagecreatefrompng($image_path);
        list($w_width, $w_height) = getimagesize($image_path);   
        $pos_x = ($dst_width - 210);
        $pos_y = ($dst_height - 40);
        imagecopy($im, $watermark, $pos_x, $pos_y, 0, 0, $w_width, $w_height);
        $nama_gambar = $dirImage.$uploadx;
        imagejpeg($im, $nama_gambar, 100);
        imagedestroy($im);
        return true;
    }
    ?>
  4. Buat file index.php dan salin kode dibawah ini.
    <html>
    <head><title>Upload gambar dengan menggunakan watermark - dokyasde</title>
    </head>
    <body>
        <form action="upload.php" method="POST" enctype="multipart/form-data">
        <input type="file" name="file_upload" accept='image/*'/>
        <input type='submit' name='upload' value='Upload'/>
        </form>
    </body>
    </html>
  5. Selanjutnya membuat file upload.php, berikut kodenya dibawah ini:
    <?php
    if(isset($_POST['upload'])){
      include "fungsi_watermark.php";
      $fileImage = $_FILES["file_upload"]["name"];
      $imageType = strtolower(pathinfo($fileImage,PATHINFO_EXTENSION));
      $check = getimagesize($_FILES["file_upload"]["tmp_name"]);
      if($check == false){
        echo "File bukan image";exit();
      }
      if($imageType != "jpg" && $imageType != "png" && $imageType != "jpeg") {
        echo "Format file image tidak sesuai, hanya support JPG,JPEG, dan PNG";exit();
      }
      if ($_FILES["file_upload"]["size"] > 2097152) {
        echo "Ukuran image terlalu besar. (Max 2MB)";exit();
      }
      else{
        $new_name = time().".jpg";
            watermark_image($new_name);
        echo "Upload gambar berhasil<br/>";
        echo "<img src='images/".$new_name."'/>";
      }
    }
    ?>
  6. Jika sudah, akan terdapat struktur file root directory pada wamp server seperti gambar dibawah ini:
    upload-file-gambar-watermark
  7.  Hasil dari coding diatas untuk upload gambar pada website dengan tambahan watermark. Gambar dibawah hanya contoh saja. :D
    contoh pembuatan watermark pada website
  8. Silahkan sempurnakan kode diatas untuk keperluan anda masing-masing :).
  9. Download Koding