علي العبدالله2 نشر 11 مايو 2021 أرسل تقرير مشاركة نشر 11 مايو 2021 كيف يمكنني تحويل الdiv الى صورة ؟ مثلاً موقع لشهادات قمت بوضع اسمي في موقع وقام بوضع الاسم داخل الصورة كيف اقوم بهذا من داخل موقعي ؟ هذا موقعي https://cast-media.netlify.app/ بعد وضع الصورة الشخصية و الاسم اريد ان تصبح كصورة واحدة ويمكن حفظها كيف يعمل ذلك ؟ اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 سامح أشرف نشر 11 مايو 2021 أرسل تقرير مشاركة نشر 11 مايو 2021 يقوم الموقع بوضع نص فوق الصورة من خلال خاصية 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! فوق الصورة كالتالي: اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عبدالله عبدالرحمن11 نشر 11 مايو 2021 أرسل تقرير مشاركة نشر 11 مايو 2021 يمكنك إستخدام 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 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 علي العبدالله2 نشر 11 مايو 2021 الكاتب أرسل تقرير مشاركة نشر 11 مايو 2021 بتاريخ 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 مافهمت هل لديك شرح فيديو يوضح ذلك ؟ اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عبدالله عبدالرحمن11 نشر 11 مايو 2021 أرسل تقرير مشاركة نشر 11 مايو 2021 بتاريخ 4 ساعات قال علي العبدالله: مافهمت هل لديك شرح فيديو يوضح ذلك ؟ canvas هو عنصر HTML بحيث يمنحك طريقة سهلة وفعالة لرسم الرسومات بإستخدام JavaScript فبإستخدام JavaScript يمكنك رسم الصورة على ال Canvas ومن ثم رسم أي نص على الCanvas فوق الصورة يمكنك الذهاب الى موقع w3school للتعرف على المزيد من المعلومات 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 علي العبدالله2 نشر 13 مايو 2021 الكاتب أرسل تقرير مشاركة نشر 13 مايو 2021 للحين ماعرفت .. انا حاط صورة فالموقع ويقدر الزائر يحط صورته و اسمه في بطاقة التهنئة للعيد بعد مايحط صورته ابقيها تصير كصورة وحدة قابلة للحفظ بتاريخ 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! فوق الصورة كالتالي: ليس لدي اي مشكلة في النص ولكن مشكلتي هي بعد الانتهاء من التعديلات من قبل الزائر اريدها ان تصبح صورة واحدة قابلة للحفظ بالتعديلات اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
علي العبدالله2
كيف يمكنني تحويل الdiv الى صورة ؟
مثلاً موقع لشهادات
قمت بوضع اسمي في موقع وقام بوضع الاسم داخل الصورة
كيف اقوم بهذا من داخل موقعي ؟
هذا موقعي
https://cast-media.netlify.app/
بعد وضع الصورة الشخصية و الاسم
اريد ان تصبح كصورة واحدة ويمكن حفظها
كيف يعمل ذلك ؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.