كيفاش تزيد ل water mark للصور الخاصة بك الجزء الأول

imadbelasri Javascript
JS

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نزيدو ل watermarking للصور ديالنا فمثلا المواقع لي معروفة بحال avito وغيرها كتخدم بهاد ال bibliothèque  باش كتحمي الصور ديالها من ان شي حد خور يستعملها ف avito مثلا كتلقى الصور عندهم background transparent لي مكتوب فيه avito.com فحنا هادشي لي غادي نديرو فالجزء الأول غادي نشوفو كيفاش نزيد text فالثاني صورة.


نظرة سريعة بالفيديو


1- الملف index.php

أول حاجة زيد dossier جديد سميه watermarking او لي بغيتي هدا هو dossier ديال ل projet ديالنا زيدو ف localhost  أول حاجة télécharger watermark.js من هنا منبعد خود الملف watermark.js وزيدو ف dossier ديال ل projet منيعد زيد ملف جديد سميه index.php غادي تكون فيه structure html ديال لملف ديالنا لي فيها واحد div عندها id img-section فيها فين غادي تعرض الصورة ديالنا وعندنا ايضا الروابط لملفات css و js وللملف watermark.js لي تليشارجينا ومتنساش تزيد ف dossier صورة كيف ما كانت وهي لي غادي تزيدلها ل watermark الكود ديال الملف هو :

                                                    
                                                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>WaterMarkig</title>
</head>
<body>
    <div id="container">
        <div id="img-section">
        </div>
    </div>
</body>
    <script src="watermark.js"></script>
    <script src="script.js"></script>
</html>
                                                    
                                                

2- الملف script.js

منبعد كتزيد ملف جديد سميه script.js فيه غادي يكون الكود لي كيمكن باش نزيدو ل watermark للصورة فأولا فل objet watermark كنعطيه الصورة منبعد عندي ل method image لي كتاخد text ليغادي يتزاد للصورة مع لحجم ديالو واللون وال opacity لي هي niveau ديال transparence منبعد كن afficher ل image ف div لي عندها ل id img-section الكود ديال الملف هو : 

                                                        
                                                            watermark(['boutique.jpg'])
  .image(watermark.text.center('darija-coding.com', '58px Josefin Slab', '#fff', 0.5))
  .then(function (img) {
    document.getElementById('img-section').appendChild(img);
  });
                                                        
                                                    

3- الملف style.css

منبعد كنزيد ملف كنسميه style.css فيه كنزيد les styles css لي غادي نحتاج الكود ديال الملف هو :

                                                        
                                                            *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#container{
    width: 1110px;
    margin: 0 auto;
}
#img-section{
    margin: 20px auto;
    width: 50%;
}
#img-section img{
    margin: 0 auto;
    width: 500px;
    height: 500px;
    border-radius: 5px;
}