API tools faq
paste
here2share

JPG Generator.html

here2share
Jun 29th, 2025 (edited)
26
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>JPG Generator</title>
  7.     <style>
  8.         body {
  9.             font-family: sans-serif;
  10.             background-color: #f0f0f0;
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: center;
  14.             flex-direction: column;
  15.             height: 100vh;
  16.             margin: 0;
  17.         }
  18.         h1 {
  19.             color: #333;
  20.         }
  21.         p {
  22.             color: #555;
  23.             margin-bottom: 20px;
  24.         }
  25.         img {
  26.             border: 2px solid #ccc;
  27.             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  28.         }
  29.         /* We hide the canvas because the user only needs to see the final image */
  30.         canvas {
  31.             display: none;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.  
  37.     <h1>Your Image is Ready!</h1>
  38.     <p>The image below was generated by your browser.</p>
  39.  
  40.     <!-- The final JPG image will be displayed here -->
  41.     <img id="generatedImage" alt="Generated Image">
  42.  
  43.     <!-- This is the canvas element we use for drawing. It's hidden from view. -->
  44.     <canvas id="imageCanvas"></canvas>
  45.  
  46.     <script>
  47.         // Wait for the window to load to ensure all elements are ready
  48.         window.onload = function() {
  49.             // --- 1. Get the Canvas and its 2D drawing context ---
  50.             const canvas = document.getElementById('imageCanvas');
  51.             const ctx = canvas.getContext('2d');
  52.  
  53.             // --- 2. Define Image Properties ---
  54.             const width = 800;
  55.             const height = 400;
  56.             const backgroundColor = '#28a745'; // A nice green color
  57.             const textColor = 'white';
  58.             const textLine1 = "Hello World.";
  59.             const textLine2 = "Feel free to right click this green image";
  60.             const textLine3 = "and then save as image";
  61.            
  62.             // Set the canvas dimensions
  63.             canvas.width = width;
  64.             canvas.height = height;
  65.  
  66.             // --- 3. Draw the Image ---
  67.             // Draw the green background
  68.             ctx.fillStyle = backgroundColor;
  69.             ctx.fillRect(0, 0, width, height);
  70.  
  71.             // Set text properties and draw the text
  72.             ctx.fillStyle = textColor;
  73.             ctx.textAlign = 'center'; // Center the text horizontally
  74.             ctx.textBaseline = 'middle'; // Align text vertically to the center
  75.  
  76.             // Draw the first line (larger font)
  77.             ctx.font = 'bold 52px Arial';
  78.             ctx.fillText(textLine1, width / 2, height / 2 - 60);
  79.  
  80.             // Draw the next two lines (smaller font)
  81.             ctx.font = '28px Arial';
  82.             ctx.fillText(textLine2, width / 2, height / 2 + 20);
  83.             ctx.fillText(textLine3, width / 2, height / 2 + 60);
  84.  
  85.             // --- 4. Convert Canvas to a JPG Image ---
  86.             // The toDataURL method creates a base64 encoded string of the image
  87.             // 'image/jpeg' specifies the format. 0.9 is the quality (from 0 to 1).
  88.             const dataUrl = canvas.toDataURL('image/jpeg', 0.9);
  89.  
  90.             // --- 5. Display the JPG in the <img> tag ---
  91.             const imgElement = document.getElementById('generatedImage');
  92.             imgElement.src = dataUrl;
  93.             imgElement.alt = textLine1 + " " + textLine2 + " " + textLine3;
  94.         };
  95.     </script>
  96.  
  97. </body>
  98. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!