Поточний час:
Сьогодні 25 вересня, понеділок 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 9 місяців 6 днів

Ваш ip адрес:54.162.181.75

Добрий вечір!
Ви обновили сторінку в 21 : 51
Статистика

Кількість публікацій на блозі: 365
Кількість коментарів на блозі: 100
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

zura-blog watermark 300Привіт всім відвідувачам Zura — Blog, судячи з назви публікації більшість з вас здогадались який напрямок буде в сьогоднішній публікації, а саме мова піде про скрипт, точніше не один скрипт, а їх декілька, скрипти за допомогою яких ви зможити створити “інструмент”, яким можна буде до фотографії додати водяний знак, або ще правильніше називати такий елемент  “Логотип”. 

Третя частина в назві публікації означає, що в цій публікації до вашої уваги третій варіант скриптів, про попередні два говорилось в минулих публікаціях, публікації з одинаковими назвами, відрізняються вони лише одними словами, (перша, друга, третя).

Отож далі коротко про перші два варіанти, в першому варіанті скриптів, для того щоб можна було додати до картинки “логотип” або “водяний знак”, потрібно було щоб сама картинка вже знаходилась в папці, в папці мають бути два графічних файла, один з розширення png, інший jpg.

Потім коли запустити сторінку в браузері, сторінка відкривається з готовим результатом, відображається картинка з логотипом,  файл який відноситься до сторінки повинен мати розширення рнр, а це означає, що переглянути результат можна тільки за наявності  запущеного  локального сервера.

Отож на екрані відобразиться сторінка з логотипом на картинці, як все працює, файл обробник, в файлі скрипт написаний мовою програмування РНР, саме завдяки коду в скрипті, до графічного файлу з розширенням   jpg, додасться ще один графічний файл з розширенням png, завдяки скрипту вони зєднаються  один з одним, і в кінцевому підсумку на сторінці відобразиться один графічний файл, з картинкою і логотипом.

Але якщо вам закортить поміняти картинку, тоді саме в цьому, а точніше сказати першому варіанті, для того щоб досягнути результату, потрібно робити багато зайвих дій.

А саме, спочатку  вставити потрібну картинку в папку, а потім також ще й робити зміни  в кодах, міняючи в кодах  назву самої картинки.

Звичайно що такий варіант не дуже багатьох влаштує, мене не то щоб би влаштовував, оскільки щоб  додавати  логотипи до фото можна і без скриптів,  а прикладними програмами, а просто було бажання,  та і в принципі нікуда бажання не ділось, посидіти над кодами і “почесати репу”, щоб удосконалити код, зробивши в кінцевому підсумку код кращиим, оскільки працює тепер все, без всяких там додавань вручну.

Звісно що не кожен з вас цікавиться РНР, і хто не дуже то кумекає в програмуванні, то робити самому всякі там зміни в кодах, не дуже то і захочиться.

Другий варіант  в ньому скрипти були вже досконаліші, оскільки появилась форма, і для того щоб отримати результат помінявши картинку, не потрібно вже було самому робити якісь зміни в кодах, міняючи назву в рядках коду, або саму назву картинки, а через форму вибрати файл, і щоб сторінка відобразилась з логотипом в браузері, потрібно всього то клацнути на кнопку, вибрати файл, і потім ще раз клацнути на кнопку “Обробити”, після чого отримати фото з логотипом.

Однак файли які відносяться до картинки повинні були вже знаходитись в папці, тому що не получиться обробити файли, якщо графічні файли завантажувати з іншого місця, а не з папки назва якої прописана в кодах.

А точніше сказати, для того щоб обробити інше фото, то файли всерівно потрібно було завчасно вносити в папку самому, але в сами кодах вже, нічого міняти не потрібно. 

Такий варіант кращий ніж перший, але звісно що якщо взяти таку точку зору, як повністю готовий скрипт, то звісно що над ним ще потрібно було багато працювати, і удосконалювати, в принципі  похожими методами мабуть створються всі програми, чи ігри, від простіших, і можливо ще не достатньо функціональних, до складніших, більш функціональніших, в цілому кращих.

Як ви вже здогадались мабуть, що третій варіант скриптів, знаходиться в цій публікації, це ще кращий і досконаліший, в цьому варіанті  не потрібно вже “бавитись” з передчасними додаваннями в папку графічних файлів для обробки, все вже додається через форму, вибрали файл в формі, завантажили файл в папку, вибрали в папці файл, і клацнувши на кнопку обробити, отримали результат з фото і з логотипом.

Звісно, що і цей варіант скриптів не можна ще назвати повністю готовим, в принципі мабуть удосконаленню не має меж.

Наприклад: ще мабуть можна зробити так, щоб не в кодах виставляти координати, в якій саме ділянці на фото має розташовуватись логотип (зверху, знизу, зліва, справа), а виставивши числа в формі, отримати після перезапуску картинку, на якій логотип відобразиться в тому місці яке ви вкажите в формі.

Якщо скажем вам потрібно зверху – зліва, бутласка виставили в формі координати (висоту і ширину), в майбутньому ще попрацюю над таким варіантом. 

Так що є ще над чим працювати, хоча якщо все за функціональністю “Ок”, то такий скрипт можна вже і до платної категорій  віднести.

В мережі можна багато безкоштовних скриптів знайти, але що таке “безкоштовний сир” вважаю пояснювати зайве, але зато над ними можна працювати, удосконалючи їх, а заодно отримати як результат, так і а саме головне, це практику і досвід.

В іншому випадку не получиться навчитись, я цей скрипт удосконалюю саме таким чином, беру частинки кодів з інших скриптів, і додаю потрібні до нього, звісно щоб запрацювало, потрібно вже “трошки кумекати” в програмуванні.

А також і тратити час, час коли сидиш в програмуванні, працюючи над якимось кодом, швидко пролітає, тому хто має багато вільного часу, і не знає куда його діти, я би радив зайнятись програмуванням, я не скажу що в мене то вільного часу ціла копиця, але вечером замість всяких там телевізійних переглядів, надаю перевагу саме програмуванню.

І тим самим, можливо ще забираючи  час на розкрутку свого блогу (мається на увазі займатись над підвищення показника ТІЦ і т.д).

Проте як бачу сам, показники всерівно збільшуються, власне і позиція ТІЦ на десятку збільшилась, тепер Zura – Blog має ТІЦ 20, так що можливо і  не варто тепер дуже аж так, намагатись додавати сайт в різні каталоги.

Я наприклад після того як отримав ТІЦ 10, не додавав свій сайт в жодний каталог, і всерівно показники на десятку збільшились. Так що для того мабуть, щоб блог був успішним, потрібно все таки викладати корисні матеріали.

Чи буде корисний скрипт, який буде до фото додавати логотип, звісно що, але за умови якщо в ньому як говориться “повинно все грати”, скоріш за все  навряд чи буде прийнятним варіантом, якщо фото будуть зберігатись в папці на сервері, і займати місця, звісно що потрібно найти спосіб їх звідти після обробки і отримання резудьтату видаляти, можна заходити на хостинг і вручну видаляти, але це не є варіант.

Тому самі розумієте, розміщувати демонстрацію на блозі чи на сайті (показ як працює скрипт), поки що не варто, та й врешті решт потрібно і про захист скрипта не забувати, скрипт то може бути і готовий, і все класно зроблено, і працює, але завжди найдуться такі бажаючі, які через скрипт захочуть якось дістатись до ваших даних.

Ну а якщо для особистого використання, то скрипт  вже готовий, можливо ще де що потрібно допрацювати, а так в цілому скрипт робочий.

В принципі він то і з першої частини публікації був робочим, тепер просто став функціональнішим і зручнішим в користуванні, що власне  мабуть кожен програміст ставить собі за мету, створити добру, корисну і багатофункціональну програму.

В загалі то скрипт це і є програма, бачу багато вже написав про свою точку зору яка стосується засвоєння веб – дизайну, тепер як створити такий елемент.

Не люблю я давати такі поради, як наприклад,  для того щоб зрозуміти про що йде мова, обовязково перейдіть і прочитайте першу частину, там другу, десяту, тому і виклав коротко про що в попередніх матеріалах які стосуються цього елементу, тому і багато розяснень на початку публікації, які стосувались перших двох варіантів.

Отож як тепер працює скрипт, або краще сказати що потрібно зробити, щоб скрипт запрацював. Створюється головна папка для скрипта, взагалі, бажано в більшості випадків для кожного окремого елементу який ви збираєтесь додавати до сайту,  створювати окрему папку.

Screenshot_105

Screenshot_107

Screenshot_109

Назву папки любу даєте, скажем можна назвати “logo”, а вже папці потрібно розмістити файли, і папки завдяки яким буде працювати скрипт.

Відкриваємо редактор для програмування, безкоштовний Notepad++, створюємо новий файл, копієємо код і вставляємо в файл, зберігаючи назву index.php,

Код  index.php

<?php
require 'cofing.php'; //Підключаєм файл конфігурації

if(isset($_FILES['fupload'])) {

    if(preg_match('/[.](jpg)|(gif)|(png)$/', //Виставлються допустимі форматы зображень для завантаження в папку "full"
        $_FILES['fupload']['name'])) {

        $filename = $_FILES['fupload']['name'];
        $source = $_FILES['fupload']['tmp_name'];
        $target = $path_to_image_directory . $filename;

        move_uploaded_file($source, $target);

    }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
    <meta name="author" content="" />
    <title>Додаємо логотип до фото використовуючи PHP</title>
    <style>
        .jc2 {
            position:relative;
            color:#cc0000;
        }
    </style>

    <script>
        var pauseFactor=15;
        function jiggleit(num){
            this.el=jiggleit.el('jiggle'+num);
            this.to=80;
            this.jig=function(){
                var c=this; if(pauseFactor){c.t=c.t? ++c.t : 1;
                    if(c.t%pauseFactor==0){c.to=pauseFactor*80;c.t=0;
                    } else c.to=80;}
                c.el.style.left=(parseInt(c.el.style.left)==1)? '-1px' : '1px';
                setTimeout(function(){c.jig();}, c.to);
            };
            this.jig();
        };

        jiggleit.el=function(id){
            return document.all? document.all[id] : document.getElementById(id);
        };

        jiggleit.init=function(){
            var i=0; while(jiggleit.el('jiggle'+i))
                i++; if(i--) for (i ; i > -1; --i)
                new jiggleit(i);
        }

        if(document.all||document.getElementById)
            window.onload=jiggleit.init;
    </script>

</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
    <table width="40%" align="center" border="5" cellpadding="3" cellspacing="1" bgcolor="#ffff">
        <tr>
            <td colspan="3" align="center"><strong>Завантаження файлу</strong> <span id="jiggle0" class="jc2"><a href="http://syteg1.ua/images/full/index1.php" class="button"> Обробка файлу</a></span></td>
        </tr>
        <tr>
            <td width ="78">Виберіть файл, завантажте файл в папку, і перейдіть клацнувши на "Обробка файлу"</td>
            <td width ="194"><input type="file" name="fupload" /><input type="submit" value="Завантажити" /></td>
        </tr>
    </table>

знову створюємо новий файл, копіюємо другий код, вставляємо і зберігаємо з назвою cofing.рнр

Код cofing.рнр

<?php
$path_to_image_directory = 'images/full/';?>

Завдяки цим двом файлам рнр, відбувається завантаження картинки в папку “full”. Попередній скрипт ніяк не хоче обробляти картинки з іншого місця, тому шукаючи вихід з положення вирішив застосувати саме такий варіант.

Отож, коли картинка завантажиться в папку “full”, саме в папці  “full” картинку вже оброблять ще одні файли, ці файли також  з розширенням рнр,  вони повинні знаходитись в папці “full”,  скажем в одній папці з картинками, на які ви хочите додавати логотип, відповідно якщо додати картинку в папку “full”, то і скрипт вже зможе цю картинку обробити, тому що обидва будуть знаходитись в папці “full”, і картинка і файли в одній папці.

Все логічно і просто, ітак в головній папці створюємо файли (index.php) і (cofing.php), далі створюємо папку з назвою “images”, в папці “images” створюємо ще одну папку з назвою “full”, (чому ще одну папку, адже можна і в “images” все розташувати), мені так потрібно ще для одного проекту, який я задумав,  матеріал про який також незабаром зявиться на Zura – Blog.

В папці “full” створюємо файли (index1.php) і (proces1.php), а також додаємо логотип, з назвою і розширенням файлу (watermark.png). Самі розумієте що розміри файлу логотипу або “водяного знаку”, не можуть бути великими, розміри мого 150х130.

Screenshot_110

Отож далі в редакторі Notepad++ створюємо ще два нові файли (index1.php, proces1.php), копіюємо код, вставляємо і зберігаємо файли в папці “full”, і ще одне головне не забути, це додати в папку “full” файл, який буде стосуватись вашого “водяного знаку”, назвати файл потрібно  (watermark.png).

Код index1.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
    <meta name="author" content="" />
    <title>Додаємо логотип до фото використовуючи PHP</title>
    <style>
        .jc2 {
            position:relative;
            color:#cc0000;
        }
    </style>

    <script>
        var pauseFactor=15;
        function jiggleit(num){
            this.el=jiggleit.el('jiggle'+num);
            this.to=80;
            this.jig=function(){
                var c=this; if(pauseFactor){c.t=c.t? ++c.t : 1;
                    if(c.t%pauseFactor==0){c.to=pauseFactor*80;c.t=0;
                    } else c.to=80;}
                c.el.style.left=(parseInt(c.el.style.left)==1)? '-1px' : '1px';
                setTimeout(function(){c.jig();}, c.to);
            };
            this.jig();
        };

        jiggleit.el=function(id){
            return document.all? document.all[id] : document.getElementById(id);
        };

        jiggleit.init=function(){
            var i=0; while(jiggleit.el('jiggle'+i))
                i++; if(i--) for (i ; i > -1; --i)
                new jiggleit(i);
        }

        if(document.all||document.getElementById)
            window.onload=jiggleit.init;
    </script>

</head>

<body>
<form enctype="form1" action="proces1.php" method="post">
    <table width="40%" align="center" border="5" cellpadding="3" cellspacing="1" bgcolor="#ffff">
        <tr>
            <td colspan="3" align="center"><strong>Обробка файлу</strong> <span id="jiggle0" class="jc2"><a href="http://syteg1.ua/index.php" class="button">Завантаження файлу</a></span></td>
        </tr>
        <tr>
            <td width ="78">Виберіть файл з папки "full", і клацніть на кнопку "Обробити"</td>
            <td width ="194"> <input type="file" name="image" /><input type="submit" value="Обробити" /></td>
</form>
</body>
</html>

Далі створюємо ще один новий файл, копіюємо наступний код, вставляємо і зберігаємо давши назву proces1.php.

Код proces1.php.

<?php
header('content-type: image/jpeg');

// отримати зображення через POST
$image = $_POST['image'];

//  водяний знак
$watermark = imagecreatefrompng('watermark.png');

// висота і ширина водяного знака
$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);

// створити jpg з оригінального зображення
$image_path = $image;
$image = imagecreatefromjpeg($image_path);
//якщо получиться помилка
if ($image === false) {
    return false;
}
$size = getimagesize($image_path);
// розміщуємо водяний знак на зображення
$dest_x = $size[0] - $watermark_width - 35;
$dest_y = $size[1] - $watermark_height - 15;

imagealphablending($image, true);
imagealphablending($watermark, true);
// створити нове зображення
imagecopy($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height);
imagejpeg($image);

// звільняємо пам'ять
imagedestroy($image);
imagedestroy($watermark);?>

В кого присутній досвід то бачить що цей файл і є обробник, завдання якому і додається до картинки логотип, в цілому яким чином виставити розташування логотипу на картинці, написано в першій публікації яка стосується цього елементу.

В даних налаштуваннях, в коді прописано щоб логотип додавався справа внизу, можна звичайно виставити інше розташування, зробивши зміни в рядках коду.

Тепер пару слів  про  скрипт написаний на інший мові, це JavaScript, цей скрипт відношеняя для обробки картинок не має ніякого, доданий для того щоб  в формі тексти відображаються тримтячими, про такий ефект йшла мова в публікації “Створюємо ефект для сайту Тримтячий текст”, як для мене чудовий варіант щоб привернти увагу.

Вважаю що навряд чи його потрібно видаляти, в принципі якщо не подобається видаляйте, в формі тексти на яких все зрозуміло написано, можливо у вас будуть і кращі варіанти щоб пояснити як користуватись скриптом.

В принципі цей варіант майже готовий для застосування і додавання для сайту, якщо в когось є бажання розмістити на сайті, єдине но, це лишні фото які будуть зберігатись на сервері після обробки.

На цьому буду закруглятись, можливо ще попрацюю над цим скриптом, і звісно що якщо получиться ще кращий варіант, то обовязково опублікую.

До зустрічі!


user_97

Інші публікації які стосуються скрипта на мові програмування РНР за допомогою якого здійснюється додавання водяного знаку до фотографій.

Leave a Reply

Your email address will not be published. Required fields are marked *