هل من طريقة لانشاء صورة تحتوي على الحرف الاول من أي نص

يبدوا أنك تريد إنشاء 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 .