docs:add webpage usage example

IamMutevu · IamMutevu · commit 3b6faef620f4 · 2024-12-17T10:28:40.000+03:00
diff --git a/README.md b/README.md
@@ -65,6 +65,55 @@ return $image->stream('png', 100);
 ````
 You can also just pass along the initials, and it will use those. Should you just include a first name, it will use the first two letters of it.
 
+
+### Example usage in a webpage
+To display the image generated by the InitialAvatarGenerator library directly on a webpage, you can utilize PHP headers to output the image as a stream or generate a temporary file and display it using an ```<img>``` tag.
+
+To output the image as a stream, you can create a separate PHP endpoint (like avatar.php) that generates the avatar image and streams it as a PNG. Then, you use the URL of this endpoint as the src of an ```<img>``` tag on your webpage.
+
+An example endpoint file (**avatar.php**) is below:
+
+```php
+<?php
+require 'vendor/autoload.php'; 
+
+use LasseRafn\InitialAvatarGenerator\InitialAvatar;
+
+header('Content-Type: image/png'); // Set the content type to PNG
+
+$avatar = new InitialAvatar();
+$name = isset($_GET['name']) ? $_GET['name'] : 'Default User';
+
+// Generate the image
+$image = $avatar->name($name)->generate();
+
+// Stream the image directly to the output
+echo $image->stream('png', 100);
+exit;
+
+```
+
+In the HTML file, you can reference the snippet below:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Avatar Example</title>
+</head>
+<body>
+    <h1>User Avatar</h1>
+    <!-- Use the PHP endpoint as the image source -->
+    <img src="avatar.php?name=John Doe" alt="Avatar for John Doe" width="100" height="100">
+
+    <img src="avatar.php?name=Jane Smith" alt="Avatar for Jane Smith" width="100" height="100">
+</body>
+</html>
+
+```
+
 ## SVG generation
 ````php
 $avatar = new LasseRafn\InitialAvatarGenerator\InitialAvatar();
