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


فهاد الجزء الثاني من كيفاش تزيد ل water mark للصور الخاصة بك غادي نشوفو كيفاش نزيدو watermark باستعمال صورة من بعد ما شفنا كيفاش نزيدوه باستعمال text فالجزء الأول فيلا متبعتيش الجزء السابق عاود رجعلو حيت هاد الجزء مرتبط به.

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

1- الملف index.php

أول حاجة زيد dossier جديد سميه watermarking او لي بغيتي هدا هو dossier ديال ل projet ديالنا زيدو ف localhost منيعد زيد ملف جديد سميه index.php غادي تكون فيه structure html ديال لملف ديالنا لي فيها واحد div عندها id img-section فيها فين غادي تعرض الصورة ديالنا وعندنا ايضا الروابط لملفات css و js  ومتنساش تزيد ف dossier  صورة كيف ما كانت وهي لي غادي تزيدلها ل watermark وصورة اخرى تكون logo وهي لي غادي نزيدوها ك 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 كنعطيه الصورة لي غادي يتزاد فيها ل watermark والصورة لي غادي تكون logo ولي غادي تزاد على الصورة ك watermark منبعد عندي ل method image لي كتاخد ل position ديال logo وال opacity لي هي niveau ديال transparence منبعد كن afficher ل image ف div لي عندها ل id img-section الكود ديال الملف هو : 

                                watermark(['boutique.jpg', 'logo.png'])
  .image(watermark.image.lowerRight(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;
}
                            


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد