جعل الـ Div صورة

يقوم الموقع بوضع نص فوق الصورة من خلال خاصية position في CSS وتحريك النص إلى الأعلى من خلال خاصية top و left و right و bottom ليكون النص فوق الصورة، ويمكنك أن تتحقق من ذلك من خلال فحص كود الموقع من خلال أدوات المطورين في المتصفح الخاص بك، وهنا مثال يقوم بنفس الأمر:

<div class="wrapper">
  <img src="https://cast-media.netlify.app/eid/card.png" width="100%">
  <div class="text">Hello, world!</div>
</div>

.text {
  position: relative;
  top: -70px;
  left: 150px;
  
  
  font-size: 2rem;
  margin: auto;
  text-align: center;
  color: lightgreen;
}

يقوم المثال السابق بعرض نفس الصورة ووضع النص Hello, world! فوق الصورة كالتالي:

يمكنك إستخدام JavaScript و HTML Canvas

لرسم الصورة في ال Canvas ورسم النص على ال Canvas

window.onload = function(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var imageObj = new Image();
 imageObj.onload = function(){
     context.drawImage(imageObj, 10, 10);
     context.font = "20px Calibri";
     context.fillText("My TEXT!", 50, 200);
 };
 imageObj.src = "mail-image.jpg"; 
};

وإضافة زر للتنزيل

<canvas id="canvas" height="200"></canvas>
<br />
<button id="download">Download</button>

وإضافة كود لجعل الزر يقوم بتنزيل الصورة المعدلة

const download = document.getElementById('download');
download.addEventListener('click', function(e) {
  var link = document.createElement('a');
  link.download = 'download.png';
  link.href = canvas.toDataURL()
  link.click();
  link.delete;
});

إذا كنت تريد التعرف على المزيد من التفاصيل بخصوص Canvas فيمكنك الذهاب الى موقع W3school أو MDN والذهاب الى صفحة Canvas

بتاريخ 10 دقائق مضت قال عبدالمجيد الجرادي:

يمكنك إستخدام JavaScript و HTML Canvas

لرسم الصورة في ال Canvas ورسم النص على ال Canvas

window.onload = function(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var imageObj = new Image();
 imageObj.onload = function(){
     context.drawImage(imageObj, 10, 10);
     context.font = "20px Calibri";
     context.fillText("My TEXT!", 50, 200);
 };
 imageObj.src = "mail-image.jpg"; 
};

وإضافة زر للتنزيل

<canvas id="canvas" height="200"></canvas>
<br />
<button id="download">Download</button>

وإضافة كود لجعل الزر يقوم بتنزيل الصورة المعدلة

const download = document.getElementById('download');
download.addEventListener('click', function(e) {
  var link = document.createElement('a');
  link.download = 'download.png';
  link.href = canvas.toDataURL()
  link.click();
  link.delete;
});

إذا كنت تريد التعرف على المزيد من التفاصيل بخصوص Canvas فيمكنك الذهاب الى موقع W3school أو MDN والذهاب الى صفحة Canvas

مافهمت

هل لديك شرح فيديو يوضح ذلك ؟

بتاريخ 4 ساعات قال علي العبدالله:

مافهمت

هل لديك شرح فيديو يوضح ذلك ؟

canvas هو عنصر HTML بحيث يمنحك طريقة سهلة وفعالة لرسم الرسومات بإستخدام JavaScript

فبإستخدام JavaScript يمكنك رسم الصورة على ال Canvas ومن ثم رسم أي نص على الCanvas فوق الصورة

يمكنك الذهاب الى موقع w3school للتعرف على المزيد من المعلومات

للحين ماعرفت ..

انا حاط صورة فالموقع

ويقدر الزائر يحط صورته و اسمه في بطاقة التهنئة للعيد

بعد مايحط صورته ابقيها تصير كصورة وحدة قابلة للحفظ

بتاريخ On 11‏/5‏/2021 at 16:41 قال سامح أشرف:

يقوم الموقع بوضع نص فوق الصورة من خلال خاصية position في CSS وتحريك النص إلى الأعلى من خلال خاصية top و left و right و bottom ليكون النص فوق الصورة، ويمكنك أن تتحقق من ذلك من خلال فحص كود الموقع من خلال أدوات المطورين في المتصفح الخاص بك، وهنا مثال يقوم بنفس الأمر:

<div class="wrapper">
  <img src="https://cast-media.netlify.app/eid/card.png" width="100%">
  <div class="text">Hello, world!</div>
</div>

.text {
  position: relative;
  top: -70px;
  left: 150px;
  
  
  font-size: 2rem;
  margin: auto;
  text-align: center;
  color: lightgreen;
}

يقوم المثال السابق بعرض نفس الصورة ووضع النص Hello, world! فوق الصورة كالتالي:

ليس لدي اي مشكلة في النص ولكن مشكلتي هي بعد الانتهاء من التعديلات من قبل الزائر 

اريدها ان تصبح صورة واحدة قابلة للحفظ بالتعديلات