السلام عليكم
هل من طريقة برمجية php او جافاسكريبت لانشاء صور مثل هذه
بحيث يتم انشاؤها تلقائيا من الحرف الاول للنص
هل من طريقة لانشاء صورة تحتوي على الحرف الاول من أي نص
يبدوا أنك تريد إنشاء avatars خاصة بالمستخدمين بصورة ديناميكية باستخدام الحرف الأول من اسم المستخدم.
للقيام بذلك يمكنك استخدام الحزمة التالية:
lasserafn/php-initial-avatar-generator
طريقة استخدام هذه الحزمة هي كما يلي:
أمر التثبيت:
الاستخدام:
الأكواد السابقة ستعيد لك الصورة المطلوبة و يمكنكن تحميلها أو عمل stream لها:
يمكنك الاطلاع على التوثيق الرسمي للحزمة لمزيد من المعلومات و التخصيص.
يوجد العديد من الطرق و المكتبات الأخرى التي تمكنك من القيام بذلك. يمكنك البحث ب generate avatars/images with initials php في أحد محركات البحث و ستظهر لك العديد من النتائج.
بالتوفيق.
مرحبا،
نعم يوجد طريقة باستخدام HTML5 + js وعنصر canvas
<!DOCTYPE html>
<style>
body,
div {
padding: 20px;
margin: 0px;
}
div {
width: 300px;
height: 300px;
border: 1px solid;
float: left;
}
</style>
Your browser does not support HTML5 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "31.5px Montserrat,sans-serif"; ctx.textBaseline = "alphabetic"; ctx.fillText("W", 190, 70);
المرجو وضع الكود في هذا الموقع
او اضافة أربع مسافات في بداية كل سطر برمجي ليظهر امنسق
مرحبا،
نعم يوجد طريقة باستخدام HTML5 + js وعنصر canvas
<!DOCTYPE html>
<html>
<head>
<style>
body,
div {
padding: 20px;
margin: 0px;
}
div {
width: 300px;
height: 300px;
border: 1px solid;
float: left;
}
</style>
</head>
<body>
<canvas
id="myCanvas"
style="
border: none;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
"
width="500"
height="100"
>
Your browser does not support HTML5
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "31.5px Montserrat,sans-serif";
ctx.textBaseline = "alphabetic";
ctx.fillText("W", 190, 70);
</script>
</body>
</html>
يمكن إنشاء ذلك بواسطة أكواد html css javascript عن طريق عمل funciton معين يضيف كل ما يحتوي داخل section ويجعله صورة image بصيغة png .
وضعت لك الأكواد هنا
يمكنك التعديل على المحتوى الذي تريد طباعته كصور من داخل عنصر section يمكن التعديل على المحتوى وأيضاً تنسيقات css .
سوف تلاحظ عند الضغط على button يحول لك محتوى section إلى صورة بصيغة png .
التعليقات