اذهب إلى المحتوى
  • 0

جعل الـ Div صورة

علي العبدالله2

السؤال

كيف يمكنني تحويل الdiv الى صورة ؟

مثلاً موقع لشهادات 

قمت بوضع اسمي في موقع وقام بوضع الاسم داخل الصورة 

كيف اقوم بهذا من داخل موقعي ؟ 

 

هذا موقعي 

https://cast-media.netlify.app/

بعد وضع الصورة الشخصية و الاسم 

اريد ان تصبح كصورة واحدة ويمكن حفظها

 

كيف يعمل ذلك ؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يقوم الموقع بوضع نص فوق الصورة من خلال خاصية 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! فوق الصورة كالتالي:

609a898c0b84b_Screenshot2021-05-11154107.png.9864dc58eb1eb2a26292e06800768afe.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكنك إستخدام 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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

مافهمت

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

مافهمت

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

 

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

بتاريخ 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! فوق الصورة كالتالي:

609a898c0b84b_Screenshot2021-05-11154107.png.9864dc58eb1eb2a26292e06800768afe.png

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

 

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...