add new site

wa008 · Dec 10, 2024 · c7d5dad · c7d5dad
1 parent 9e0c721
commit c7d5dad
Show file tree

Hide file tree

Showing 3 changed files with 226 additions and 0 deletions.
diff --git a/ImageGenerator/index.html b/ImageGenerator/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Generator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Image Generator</h1>
+    <div class="wrapper">
+        <div class="controls">
+            <div class="option">
+                <label for="bgColor">Background Color:</label>
+                <input type="color" id="bgColor" value="#ffc0cb">
+            </div>
+            <div class="option">
+                <label for="textColor">Text Color:</label>
+                <input type="color" id="textColor" value="#90ee90">
+            </div>
+            <div class="option two-lines">
+                <label for="textInput">Text:</label>
+                <textarea id="textInput">This is a demo, welcome advice.</textarea>
+            </div>
+            <div class="option">
+                <label for="widthSlider">Width:</label>
+                <input type="range" id="widthSlider" min="0" max="1000" value="500">
+                <span id="widthValue">500</span>
+            </div>
+            <div class="option">
+                <label for="heightSlider">Height:</label>
+                <input type="range" id="heightSlider" min="0" max="1000" value="500">
+                <span id="heightValue">500</span>
+            </div>
+            <div class="option">
+                <label for="fontSelect">Font:</label>
+                <select id="fontSelect">
+                    <option value="Arial">Arial</option>
+                    <option value="Verdana">Verdana</option>
+                    <option value="Times New Roman">Times New Roman</option>
+                    <option value="Courier New">Courier New</option>
+                    <option value="Georgia">Georgia</option>
+                    <option value="Comic Sans MS">Comic Sans MS</option>
+                </select>
+            </div>
+            <div class="font-samples">
+                <p style="font-family:Arial;">Arial</p>
+                <p style="font-family:Verdana;">Verdana</p>
+                <p style="font-family:'Times New Roman';">Times New Roman</p>
+                <p style="font-family:'Courier New';">Courier New</p>
+                <p style="font-family:Georgia;">Georgia</p>
+                <p style="font-family:'Comic Sans MS';">Comic Sans MS</p>
+            </div>
+        </div>
+        <div class="canvas-container">
+            <canvas id="canvas"></canvas>
+            <button id="downloadBtn">Download Image</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/ImageGenerator/script.js b/ImageGenerator/script.js
@@ -0,0 +1,81 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('2d');
+
+    const bgColorInput = document.getElementById('bgColor');
+    const textColorInput = document.getElementById('textColor');
+    const textInput = document.getElementById('textInput');
+    const widthSlider = document.getElementById('widthSlider');
+    const heightSlider = document.getElementById('heightSlider');
+    const fontSelect = document.getElementById('fontSelect');
+    const widthValue = document.getElementById('widthValue');
+    const heightValue = document.getElementById('heightValue');
+
+    const drawImage = () => {
+        const bgColor = bgColorInput.value;
+        const textColor = textColorInput.value;
+        const text = textInput.value;
+        const width = parseInt(widthSlider.value, 10);
+        const height = parseInt(heightSlider.value, 10);
+        const font = fontSelect.value;
+
+        canvas.width = width;
+        canvas.height = height;
+
+        ctx.fillStyle = bgColor;
+        ctx.fillRect(0, 0, width, height);
+
+        ctx.fillStyle = textColor;
+        ctx.font = `48px ${font}`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+
+        const maxWidth = width - 40;
+        const lines = wrapText(ctx, text, maxWidth);
+        const lineHeight = 48;
+        const startY = height / 2 - (lines.length - 1) * lineHeight / 2;
+
+        lines.forEach((line, index) => {
+            ctx.fillText(line, width / 2, startY + index * lineHeight);
+        });
+
+        widthValue.textContent = width;
+        heightValue.textContent = height;
+    };
+
+    const wrapText = (context, text, maxWidth) => {
+        const words = text.split(' ');
+        const lines = [];
+        let currentLine = words[0];
+
+        for (let i = 1; i < words.length; i++) {
+            const word = words[i];
+            const width = context.measureText(currentLine + ' ' + word).width;
+            if (width < maxWidth) {
+                currentLine += ' ' + word;
+            } else {
+                lines.push(currentLine);
+                currentLine = word;
+            }
+        }
+        lines.push(currentLine);
+        return lines;
+    };
+
+    const downloadImage = () => {
+        const link = document.createElement('a');
+        link.download = 'custom-image.png';
+        link.href = canvas.toDataURL();
+        link.click();
+    };
+
+    bgColorInput.addEventListener('input', drawImage);
+    textColorInput.addEventListener('input', drawImage);
+    textInput.addEventListener('input', drawImage);
+    widthSlider.addEventListener('input', drawImage);
+    heightSlider.addEventListener('input', drawImage);
+    fontSelect.addEventListener('change', drawImage);
+    document.getElementById('downloadBtn').addEventListener('click', downloadImage);
+
+    drawImage();
+});
diff --git a/ImageGenerator/styles.css b/ImageGenerator/styles.css
@@ -0,0 +1,83 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+.wrapper {
+    display: flex;
+    gap: 20px;
+    justify-content: space-between;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.controls {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 250px;
+    position: sticky;
+    top: 20px;
+    height: max-content;
+    margin-left: 20px;
+}
+
+.option {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.two-lines textarea {
+    flex: 1;
+    height: 40px;
+    resize: both;
+}
+
+label {
+    margin-right: 10px;
+    min-width: 100px;
+}
+
+span {
+    margin-left: 10px;
+    font-size: 14px;
+}
+
+.font-samples {
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+}
+
+.font-samples p {
+    margin: 2px 0;
+    font-size: 14px;
+}
+
+.canvas-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 2;
+    min-width: 500px;
+}
+
+canvas {
+    border: 1px solid black;
+    margin-bottom: 10px;
+}
+
+button {
+    padding: 5px 10px;
+    font-size: 16px;
+    cursor: pointer;
+}