12/09/2016

Cara Membuat Watermark Gambar Dengan PHP

Apa sih Watermark itu? atau dalam bahasa indonesianya "tanda air"? 

Watermark / tanda air adalah sebuah tanda yang kita buat pada sebuah gambar, video ataupun juga media lainnya. Watermark dibuat dan digunakan untuk melindungi gambar/konten/media kita dari pihak-pihak yang tidak bertanggungjawab mengambil , menggunakan hingga mengakui bahwa konten tersebut adalah miliknya.


Kalian ga mau kan konten kalian dibajak begitu saja sama orang lain? Nah maka dari itu aku disini mau berbagi cara buat watermark gambar. Hanya gambar aja yaa, bukan video.

Sedikit cerita berawal dari ketidak sengajaan melihat artikel di website tetangga, konten-konten gambarnya ada tanda atau logo dari website nya. Emang sih sekarang udah banyak penyedia pembuatan watermark secara online dan gratis, bisa juga pake editor gambar kaya photoshop untuk menggabungkan foto. Tapi yaa ga ada salahnya bikin sendiri, daripada harus ribert edit pakai editor gambar.. Selain menambah ilmu juga menambah duit *ehh , maksudnya menambah konten artikel disini biar banyak, kan kalo uda banyak nanti rame web nya, kalo uda rame nanti di daftarin adsense, jadi kan dapet duit nantinya. haha duit lagi. ga ada ujungnya kalo soal duit :v

Daripada mikirin duit melulu langsung aja deh ya kita mulai tutorialnya. disimak dengan seksama bila perlu jangan berkedip biar lebih fokus !

Hasil akhir dari Cara Membuat Watermark Gambar Dengan PHP seperti ini kurang lebih :




Terdapat pemilihan untuk posisi/letak watermak yang akan kita pasang ada gambar.


Pertama, buat project php baru kalian. terserah dinamain apa, kalo aku namanya "Membuat_watermark_gambar_dengan_php"

Kedua, buat folder bernama "logo" untuk penyimpanan gambar logo yang akan digunakan sebagai logo watermark pada gambar. oh ya, lebih baik gunakan logo yang berkekstensi .png agar tampilan lebih bagus dan buat sedikit opacity nya sehingga gambar akan terlihat samar-samar.

Ketiga, buat folder bernama "upload", ini sebagai directory gambar yang telah kita watermark.

Keempat, kembali ke folder "Membuat_watermark_gambar_dengan_php", pada folder itu buat file bernama "index.php", isi dengan kode ini pada file index.php tersebut dan jangan lupa save:

<html>
    <head>
        <title>Watermark Indra Ahmad Iskandar</title>
        <style>
            #container {
                width:90%; 
            }
            #inputan {
                float:left;
            }
            #hasil {
                float:right;
                background: #333333;
                padding: 5px;
                margin:5px;
            }
            #hasil p{
                font-weight: bold;
                background: #eeeeee;
                padding: 5px;
                border-radius: 5px;
                text-align: center;
            }
            #hasil p a{
                color: #333333;
                text-decoration: none;
            }
            #hasil p a:hover{
                color: #ff3333;
                text-decoration: none;
            }
            legend {
                background: #333333;
                color:#ffffff; 
                border: 1px solid #eeeeee;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="inputan">
                <fieldset style="max-width:350px;">
                    <legend>Watermark Gambar</legend>
                    <form action="" method="POST" enctype="multipart/form-data">
                        <table>
                            <tr>
                                <td>Pilih Foto</td>
                                <td>: <input type="file" name="foto" required="required"/>
                                </td>
                            </tr>
                            <tr>
                                <td>Pilih Posisi</td>
                                <td>
                                    <input type="radio" name="posisi" value="Pojok Kiri Atas" required="required"/> Pojok Kiri Atas <br>
                                    <input type="radio" name="posisi" value="Pojok Kanan Atas" required="required"/> Pojok Kanan Atas <br>
                                    <input type="radio" name="posisi" value="Pojok Kiri Bawah" required="required"/> Pojok Kiri Bawah <br>
                                    <input type="radio" name="posisi" value="Pojok Kanan Bawah" required="required"/> Pojok Kanan Bawah <br>
                                </td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td><input type="submit" name="proses" value="Buat Watermark"/></td>
                            </tr>
                        </table>
                    </form>
                </fieldset>
            </div>

            <?php
            // jika tombol proses di klik
            if (isset($_POST['proses'])) {
                $file = $_FILES['foto']['name']; // nilai post dari type foto
                $type = $_FILES['foto']['type']; // nilai post dari type foto
                $posisi = $_POST['posisi']; // nilai post dari posisi untuk watermark
                if (!empty($file)) { // pengecekan jika file tidak kosong
                    if ($type != "image/gif" && $type != "image/jpg" && $type != "image/jpeg" && $type != "image/png") { // pengecekan ekstensi file yang diperbolehkan
                        echo "<script type='text/javascript'>alert('File yang diijinkan hanya berekstensi .jpg, .jpeg, .png dan .gif ');</script>"; // alert jika tidak memenuhi kondisi di tas
                        echo "<meta http-equiv='refresh' content='0;index.php' />"; // refresh ke halaman index.php
                    } else {
                        $direktori = "upload/"; //direktori tempat penyimpanan upload foto
                        $watermark = "logo/indra92-logo.png"; //tempat upload foto yang dipakai untuk watermark nya, bisa kalian sesuaikan dengan yang kalian inginkan
                        $name = 'foto'; //name pada input type file lihat pada inputan diatas -> name="foto"
                        $namaBaru = 'upload' . date('Y-m-d H-i-s'); // nama untuk foto setelah diberi watermark
                        //panggil function watermark_image
                        $proses = watermark_image($direktori, $namaBaru, $watermark, $name, $posisi);
                        if ($proses['status'] == true) { // pengecekan jika function watermark_image sukses dijalankan
                            echo'<div id="hasil"><p><a href="hapus_gambar.php?gambar=' . $namaBaru . $proses['ext'] . '">Hapus</a></p><img src="' . $direktori . $namaBaru . $proses['ext'] . '"/></div>';
                        } else {
                            echo'<div id="hasil">gagal</div>';
                        }
                    }
                }
            }
            // Jika tidak ada interaksi atau tombol proses tidak di klik maka munculkan gambar yang ada di directory upload
            else {
                $target_dir = "upload/";
                $lihat_directory = opendir($target_dir); // mengakses directori upload
                if ($lihat_directory) {
                    while (($file = readdir($lihat_directory)) !== false) {
                        if ($file != "." AND $file != "..") {
                            echo'<div id="hasil"><p><a href="hapus_gambar.php?gambar=' . $file . '">Hapus</a></p><img src="' . $target_dir . $file . '" width="100px" height="100px"/></div>';
                        }
                    }
                    closedir($lihat_directory);
                } else {
                    echo "Direktori <b>" . $target_dir . "</b> tidak dapat dibuka";
                }
            }

            function watermark_image($path, $new_image_name, $image_show, $file, $posisinya) {
                $image_path = $image_show;
                move_uploaded_file($_FILES['' . $file . '']['tmp_name'], $path . $_FILES['' . $file . '']['name']);
                $oldimage_name = $path . $_FILES['' . $file . '']['name'];
                list($owidth, $oheight) = getimagesize($oldimage_name);
                $width = $owidth; // pengaturan width gambar setelah di beri watermark, untuk costum silahkan rubah $owidth sesuai kebutuhan dengan menggunakan angka
                $height = $oheight; // pengaturan height gambar setelah di beri watermark, sama seperti width untuk costum
                $im = imagecreatetruecolor($width, $height);
                $bgcolor = imagecolorallocate($im, 255, 255, 255);
                imagefill($im, 0, 0, $bgcolor);
                $info = getimagesize($oldimage_name); // mengambil ukuran dari gambar yang diupload
                // pengecekan unruk info gambar yang diambil
                if ($info['mime'] == 'image/jpeg') {
                    $image = imagecreatefromjpeg($oldimage_name);
                    $ext = '.jpg';
                } elseif ($info['mime'] == 'image/gif') {
                    $image = imagecreatefromgif($oldimage_name);
                    $ext = '.gif';
                } elseif ($info['mime'] == 'image/png') {
                    $image = imagecreatefrompng($oldimage_name);
                    $ext = '.png';
                }

                imagecopyresampled($im, $image, 0, 0, 0, 0, $width, $height, $owidth, $oheight);

                $watermark = imagecreatefrompng($image_path); // ini untuk watermark, jika logo anda berkestensi gif ataupun jpg silahkan sesuaikan
                list($w_width, $w_height) = getimagesize($image_path);
                $pos_x = $width - $w_width;
                $pos_y = $height - $w_height;

                // pengecekan untuk posisi watermak yang dipilih
                if ($posisinya == "Pojok Kiri Atas") {
                    imagecopy($im, $watermark, 0, 0, 0, 0, $w_width, $w_height);
                } else if ($posisinya == "Pojok Kanan Atas") {
                    imagecopy($im, $watermark, $pos_x, 0, 0, 0, $w_width, $w_height);
                } else if ($posisinya == "Pojok Kanan Bawah") {
                    imagecopy($im, $watermark, $pos_x, $pos_y, 0, 0, $w_width, $w_height);
                } else {
                    imagecopy($im, $watermark, 0, $pos_y, 0, 0, $w_width, $w_height);
                }

                if (imagejpeg($im, $path . $new_image_name . $ext, 100)) {
                    $data['status'] = true;
                } else {
                    $data['status'] = false;
                }
                imagedestroy($im);
                unlink($oldimage_name);
                $data['ext'] = $ext;
                return $data;
            }
            ?>
        </div>
    </body>
</html>

Kelima, buat file bernama "hapus_gambar.php", ini berguna untuk menghapus gambar . isi dengan kode berikut dan save:

<?php

$gambar = isset($_GET['gambar']) ? $_GET ['gambar'] : "";
if ($gambar == "") {
    echo "<script type='text/javascript'>alert('Tidak Ada Gambar Yang Di pilih $gambar');</script>";
    echo "<meta http-equiv='refresh' content='0;index.php' />";
} else {
    $path = "upload/";
    $file = "$path/$gambar";
    $hapus = unlink($file);
    if ($hapus) {
        echo "<script type='text/javascript'>alert('Gambar Berhasil di Hapus $gambar');</script>";
        echo "<meta http-equiv='refresh' content='0;index.php' />";
    } else {
        echo "<script type='text/javascript'>alert('Gamabr Gagal di Hapus $gambar');</script>";
        echo "<meta http-equiv='refresh' content='0;index.php' />";
    }
}
?>

Keenam, jalankan program tersebut  dengan membuka browser lalu ketikan "localhost/membuat_watermark_gambar_dengan_php/" dan lihat hasilnya..

Demo :


Mulai menulis blog sejak tahun 2012. Saat ini sedang disibukkan dengan karir dibidang IT nya.

Komentar yang mengandung spam / link aktif akan secara otomatis disembunyikan. Mohon maaf atas ketidaknyamanan jika pertanyaan telat ataupun tidak terbalas karena keterbatasannya waktu. Silahkan hubungi kami di menu Contact Us. Terimakasih
EmoticonEmoticon