كيفاش تزيد ل 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;
}