Spaces:
Sleeping
Sleeping
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>渐变壁纸实验室 (Gradient Wallpaper Lab)</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| window.onerror = function(msg, url, line, col, error) { | |
| const errorBox = document.getElementById('global-error'); | |
| if(errorBox) { | |
| errorBox.classList.remove('hidden'); | |
| errorBox.innerText = `Error: ${msg}\nLine: ${line}`; | |
| } | |
| console.error('Global Error:', error); | |
| return false; | |
| }; | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Playfair+Display:wght@700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| .canvas-container { | |
| box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5); | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #4b5563; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #6b7280; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-950 text-white min-h-screen flex flex-col overflow-hidden"> | |
| <!-- Header --> | |
| <header class="p-4 border-b border-gray-800 bg-gray-900/80 backdrop-blur fixed w-full z-20 top-0"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-pink-500 via-purple-500 to-indigo-500 shadow-lg shadow-purple-500/20"></div> | |
| <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-300"> | |
| 渐变壁纸实验室 <span class="text-xs text-gray-500 font-normal ml-2 border border-gray-700 px-1.5 py-0.5 rounded">Pro</span> | |
| </h1> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <a href="https://huggingface.co/spaces/duqing26/gradient-wallpaper-lab" target="_blank" class="text-xs text-gray-400 hover:text-white transition flex items-center gap-1"> | |
| <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg> | |
| By duqing26 | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow flex flex-col md:flex-row pt-20 pb-0 h-screen max-w-full mx-auto w-full"> | |
| <!-- Controls Sidebar --> | |
| <aside class="w-full md:w-96 flex-shrink-0 bg-gray-900/90 border-r border-gray-800 backdrop-blur-sm flex flex-col h-full z-10"> | |
| <div class="p-6 overflow-y-auto flex-grow space-y-8 custom-scrollbar"> | |
| <!-- Palettes --> | |
| <div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider">色彩主题</h3> | |
| <button onclick="generatePalette()" class="text-xs bg-gray-800 hover:bg-gray-700 text-purple-400 px-2 py-1 rounded transition flex items-center gap-1"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg> | |
| 随机生成 | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2 mb-4"> | |
| <button onclick="applyPreset('neon')" class="h-10 rounded-lg bg-gradient-to-r from-[#f72585] via-[#7209b7] to-[#4361ee] hover:opacity-90 transition relative group overflow-hidden"><span class="absolute inset-0 flex items-center justify-center bg-black/20 text-xs font-medium opacity-0 group-hover:opacity-100 transition">赛博霓虹</span></button> | |
| <button onclick="applyPreset('sunset')" class="h-10 rounded-lg bg-gradient-to-r from-[#ffbe0b] via-[#fb5607] to-[#8338ec] hover:opacity-90 transition relative group overflow-hidden"><span class="absolute inset-0 flex items-center justify-center bg-black/20 text-xs font-medium opacity-0 group-hover:opacity-100 transition">日落大道</span></button> | |
| <button onclick="applyPreset('nature')" class="h-10 rounded-lg bg-gradient-to-r from-[#2d6a4f] via-[#52b788] to-[#95d5b2] hover:opacity-90 transition relative group overflow-hidden"><span class="absolute inset-0 flex items-center justify-center bg-black/20 text-xs font-medium opacity-0 group-hover:opacity-100 transition">森之呼吸</span></button> | |
| <button onclick="applyPreset('pastel')" class="h-10 rounded-lg bg-gradient-to-r from-[#cdb4db] via-[#ffafcc] to-[#a2d2ff] hover:opacity-90 transition relative group overflow-hidden"><span class="absolute inset-0 flex items-center justify-center bg-black/20 text-xs font-medium opacity-0 group-hover:opacity-100 transition">棉花糖</span></button> | |
| <button onclick="applyPreset('ocean')" class="h-10 rounded-lg bg-gradient-to-r from-[#03045e] via-[#0077b6] to-[#00b4d8] hover:opacity-90 transition relative group overflow-hidden"><span class="absolute inset-0 flex items-center justify-center bg-black/20 text-xs font-medium opacity-0 group-hover:opacity-100 transition">深海迷航</span></button> | |
| <button onclick="applyPreset('dark')" class="h-10 rounded-lg bg-gradient-to-r from-[#000000] via-[#14213d] to-[#e5e5e5] hover:opacity-90 transition relative group overflow-hidden"><span class="absolute inset-0 flex items-center justify-center bg-black/20 text-xs font-medium opacity-0 group-hover:opacity-100 transition">极简黑白</span></button> | |
| </div> | |
| <div id="color-inputs" class="flex gap-2 justify-between"> | |
| <!-- Color inputs injected here --> | |
| </div> | |
| </div> | |
| <!-- Parameters --> | |
| <div> | |
| <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">画面质感</h3> | |
| <div class="space-y-5"> | |
| <div class="group"> | |
| <label class="flex justify-between text-xs mb-2 text-gray-300"> | |
| <span>噪点强度 (Grain)</span> | |
| <span id="grain-val" class="text-purple-400 font-mono">15%</span> | |
| </label> | |
| <input type="range" id="grain" min="0" max="40" value="15" class="w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500 group-hover:bg-gray-600 transition"> | |
| </div> | |
| <div class="group"> | |
| <label class="flex justify-between text-xs mb-2 text-gray-300"> | |
| <span>模糊程度 (Blur)</span> | |
| <span id="blur-val" class="text-purple-400 font-mono">100px</span> | |
| </label> | |
| <input type="range" id="blur" min="0" max="200" value="100" class="w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500 group-hover:bg-gray-600 transition"> | |
| </div> | |
| <div class="group"> | |
| <label class="flex justify-between text-xs mb-2 text-gray-300"> | |
| <span>形状复杂度</span> | |
| <span id="complexity-val" class="text-purple-400 font-mono">中</span> | |
| </label> | |
| <input type="range" id="complexity" min="3" max="10" value="6" class="w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500 group-hover:bg-gray-600 transition"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Text Overlay --> | |
| <div class="pt-4 border-t border-gray-800"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider">文字叠加</h3> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" id="show-text" class="sr-only peer"> | |
| <div class="w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-purple-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-purple-600"></div> | |
| </label> | |
| </div> | |
| <div id="text-controls" class="space-y-4 opacity-50 pointer-events-none transition-opacity duration-200"> | |
| <input type="text" id="overlay-text" value="Stay Creative" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-purple-500 transition placeholder-gray-500" placeholder="输入文字..."> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <select id="font-family" class="bg-gray-800 border border-gray-700 rounded-lg px-2 py-2 text-xs text-white focus:outline-none"> | |
| <option value="'Inter', sans-serif">Modern (Sans)</option> | |
| <option value="'Playfair Display', serif">Elegant (Serif)</option> | |
| <option value="'JetBrains Mono', monospace">Coding (Mono)</option> | |
| </select> | |
| <input type="number" id="font-size" value="120" min="10" max="500" class="bg-gray-800 border border-gray-700 rounded-lg px-2 py-2 text-xs text-white focus:outline-none" title="Font Size"> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <input type="color" id="text-color" value="#ffffff" class="h-8 w-8 rounded cursor-pointer bg-transparent border-0 p-0"> | |
| <label class="text-xs text-gray-400">文字颜色</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Download Buttons --> | |
| <div class="p-6 border-t border-gray-800 bg-gray-900 z-20"> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button onclick="downloadImage('mobile')" class="bg-gray-800 hover:bg-gray-700 text-white py-3 rounded-xl font-medium transition flex flex-col items-center justify-center gap-1 border border-gray-700 hover:border-gray-600 group"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 group-hover:text-white transition" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /> | |
| </svg> | |
| <span class="text-xs text-gray-300">手机壁纸 (9:19)</span> | |
| </button> | |
| <button onclick="downloadImage('desktop')" class="bg-gray-800 hover:bg-gray-700 text-white py-3 rounded-xl font-medium transition flex flex-col items-center justify-center gap-1 border border-gray-700 hover:border-gray-600 group"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 group-hover:text-white transition" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> | |
| </svg> | |
| <span class="text-xs text-gray-300">桌面壁纸 (16:9)</span> | |
| </button> | |
| </div> | |
| <div class="mt-3 text-center"> | |
| <p class="text-[10px] text-gray-600">Generated locally in 4K resolution</p> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Preview Area --> | |
| <div class="flex-grow bg-black relative flex items-center justify-center overflow-hidden p-8"> | |
| <div class="absolute inset-0 opacity-20 pointer-events-none" style="background-image: radial-gradient(#333 1px, transparent 1px); background-size: 20px 20px;"></div> | |
| <!-- Hidden Canvas for Rendering --> | |
| <canvas id="renderCanvas" style="display: none;"></canvas> | |
| <!-- Preview Image Wrapper --> | |
| <div class="relative shadow-2xl rounded-2xl overflow-hidden transition-all duration-500 ease-in-out border border-gray-800" id="preview-container"> | |
| <img id="previewImage" class="block w-full h-full object-cover bg-gray-900" alt="Preview"> | |
| <!-- Loading Overlay --> | |
| <div id="loading" class="absolute inset-0 flex flex-col items-center justify-center bg-gray-900/60 backdrop-blur-sm z-20 hidden transition-opacity"> | |
| <div class="animate-spin rounded-full h-10 w-10 border-4 border-purple-500 border-t-transparent mb-3"></div> | |
| <span class="text-xs font-semibold tracking-wider text-purple-200">RENDERING 4K...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| const canvas = document.getElementById('renderCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const previewImg = document.getElementById('previewImage'); | |
| const previewContainer = document.getElementById('preview-container'); | |
| // State | |
| let currentColors = []; | |
| let currentMode = 'mobile'; // 'mobile' or 'desktop' | |
| // Presets | |
| const PRESETS = { | |
| neon: ['#f72585', '#7209b7', '#3a0ca3', '#4361ee', '#4cc9f0'], | |
| sunset: ['#ffbe0b', '#fb5607', '#ff006e', '#8338ec', '#3a86ff'], | |
| nature: ['#2d6a4f', '#40916c', '#52b788', '#74c69d', '#95d5b2'], | |
| pastel: ['#cdb4db', '#ffc8dd', '#ffafcc', '#bde0fe', '#a2d2ff'], | |
| ocean: ['#03045e', '#0077b6', '#00b4d8', '#90e0ef', '#caf0f8'], | |
| dark: ['#000000', '#14213d', '#2c3e50', '#4a4e69', '#9a8c98'] | |
| }; | |
| // Fix preset syntax error in object above if any | |
| PRESETS.sunset = ['#ffbe0b', '#fb5607', '#ff006e', '#8338ec', '#3a86ff']; | |
| // Config | |
| const SIZES = { | |
| mobile: { width: 1440, height: 3040, displayClass: 'h-[80vh] w-auto aspect-[9/19]' }, | |
| desktop: { width: 3840, height: 2160, displayClass: 'w-[80vw] h-auto aspect-[16/9]' } | |
| }; | |
| // Init | |
| document.addEventListener('DOMContentLoaded', () => { | |
| generatePalette(); | |
| render(); | |
| setupListeners(); | |
| updatePreviewStyle(); | |
| }); | |
| function setupListeners() { | |
| ['grain', 'blur', 'complexity'].forEach(id => { | |
| document.getElementById(id).addEventListener('input', (e) => { | |
| updateLabels(); | |
| render(); | |
| }); | |
| }); | |
| // Text Controls | |
| const textInputs = ['overlay-text', 'font-family', 'font-size', 'text-color']; | |
| textInputs.forEach(id => { | |
| document.getElementById(id).addEventListener('input', render); | |
| }); | |
| document.getElementById('show-text').addEventListener('change', (e) => { | |
| const controls = document.getElementById('text-controls'); | |
| if (e.target.checked) { | |
| controls.classList.remove('opacity-50', 'pointer-events-none'); | |
| } else { | |
| controls.classList.add('opacity-50', 'pointer-events-none'); | |
| } | |
| render(); | |
| }); | |
| } | |
| function updateLabels() { | |
| document.getElementById('grain-val').innerText = document.getElementById('grain').value + '%'; | |
| document.getElementById('blur-val').innerText = document.getElementById('blur').value + 'px'; | |
| const c = document.getElementById('complexity').value; | |
| document.getElementById('complexity-val').innerText = c > 7 ? '高' : (c > 4 ? '中' : '低'); | |
| } | |
| function updatePreviewStyle() { | |
| previewImg.className = SIZES[currentMode].displayClass + ' object-cover rounded-xl shadow-2xl'; | |
| } | |
| function applyPreset(name) { | |
| currentColors = [...PRESETS[name]]; | |
| updateColorInputs(); | |
| render(); | |
| } | |
| function generatePalette() { | |
| currentColors = []; | |
| const hueBase = Math.random() * 360; | |
| for (let i = 0; i < 5; i++) { | |
| const hue = (hueBase + (Math.random() * 90 - 45)) % 360; | |
| const sat = 50 + Math.random() * 50; | |
| const light = 30 + Math.random() * 50; | |
| currentColors.push(`hsl(${hue}, ${sat}%, ${light}%)`); | |
| } | |
| updateColorInputs(); | |
| render(); | |
| } | |
| function updateColorInputs() { | |
| const container = document.getElementById('color-inputs'); | |
| container.innerHTML = ''; | |
| currentColors.forEach((color, index) => { | |
| const div = document.createElement('div'); | |
| div.className = 'w-full h-8 rounded-md border border-white/10 cursor-pointer hover:scale-105 transition relative overflow-hidden'; | |
| // Handle HSL to Hex for input value if needed, or just set style | |
| // If it's already hex (from preset), fine. If HSL (from random), fine for style but input needs hex. | |
| // We'll standardise to Hex for simplicity in input value | |
| let hexColor = color; | |
| if (color.startsWith('hsl')) { | |
| hexColor = hslToHex(color); | |
| } | |
| div.style.backgroundColor = color; | |
| const input = document.createElement('input'); | |
| input.type = 'color'; | |
| input.value = hexColor; | |
| input.className = 'absolute inset-0 w-full h-full opacity-0 cursor-pointer'; | |
| input.addEventListener('input', (e) => { | |
| currentColors[index] = e.target.value; | |
| div.style.backgroundColor = e.target.value; | |
| render(); | |
| }); | |
| div.appendChild(input); | |
| container.appendChild(div); | |
| }); | |
| } | |
| function render() { | |
| const size = SIZES[currentMode]; | |
| canvas.width = size.width; | |
| canvas.height = size.height; | |
| const w = canvas.width; | |
| const h = canvas.height; | |
| // 1. Fill Background | |
| ctx.fillStyle = currentColors[0]; | |
| ctx.fillRect(0, 0, w, h); | |
| // 2. Draw Blobs | |
| const complexity = parseInt(document.getElementById('complexity').value); | |
| ctx.globalCompositeOperation = 'screen'; // Blend mode | |
| // Deterministic seeding for consistency during tweaking? | |
| // For now random is fine, but maybe we want "Seed" later. | |
| // To prevent flickering when changing grain, we should probably seed random. | |
| // But let's keep it dynamic for now as users might want to click "Render" to re-roll positions. | |
| // Actually, we should probably save positions unless "Generate" is clicked? | |
| // For simplicity in this v2, we'll re-roll positions on render which happens on input change. | |
| // Wait, that means sliding "Grain" will make blobs dance. That's annoying. | |
| // Let's implement a simple seeded random or cached positions. | |
| if (!window.blobPositions || window.blobPositions.length !== complexity) { | |
| regenerateBlobPositions(complexity); | |
| } | |
| window.blobPositions.forEach((pos, i) => { | |
| const color = currentColors[(i + 1) % currentColors.length] || currentColors[1]; | |
| const x = pos.x * w; | |
| const y = pos.y * h; | |
| const r = pos.r * Math.max(w, h); | |
| const g = ctx.createRadialGradient(x, y, 0, x, y, r); | |
| g.addColorStop(0, color); | |
| g.addColorStop(1, 'rgba(0,0,0,0)'); | |
| ctx.fillStyle = g; | |
| ctx.beginPath(); | |
| ctx.arc(x, y, r, 0, Math.PI * 2); | |
| ctx.fill(); | |
| }); | |
| ctx.globalCompositeOperation = 'source-over'; | |
| // 3. Add Grain | |
| const grainAmount = parseInt(document.getElementById('grain').value); | |
| if (grainAmount > 0) { | |
| addNoise(ctx, w, h, grainAmount / 100); | |
| } | |
| // 4. Add Text Overlay | |
| if (document.getElementById('show-text').checked) { | |
| const text = document.getElementById('overlay-text').value; | |
| if (text) { | |
| const fontFamily = document.getElementById('font-family').value; | |
| const fontSizeBase = parseInt(document.getElementById('font-size').value); | |
| const textColor = document.getElementById('text-color').value; | |
| // Scale font size based on resolution | |
| const scaleFactor = w / 1440; // Reference width | |
| const fontSize = fontSizeBase * scaleFactor; | |
| ctx.font = `${fontSize}px ${fontFamily.split(',')[0]}`; // Hack for canvas font string | |
| ctx.textAlign = 'center'; | |
| ctx.textBaseline = 'middle'; | |
| // Shadow | |
| ctx.shadowColor = 'rgba(0,0,0,0.3)'; | |
| ctx.shadowBlur = 20 * scaleFactor; | |
| ctx.shadowOffsetX = 0; | |
| ctx.shadowOffsetY = 10 * scaleFactor; | |
| ctx.fillStyle = textColor; | |
| ctx.fillText(text, w / 2, h / 2); | |
| // Reset shadow | |
| ctx.shadowColor = 'transparent'; | |
| ctx.shadowBlur = 0; | |
| } | |
| } | |
| // Update Preview | |
| previewImg.src = canvas.toDataURL('image/jpeg', 0.8); | |
| } | |
| function regenerateBlobPositions(count) { | |
| window.blobPositions = []; | |
| for (let i = 0; i < count; i++) { | |
| window.blobPositions.push({ | |
| x: Math.random(), | |
| y: Math.random(), | |
| r: Math.random() * 0.6 + 0.3 | |
| }); | |
| } | |
| } | |
| function addNoise(ctx, w, h, opacity) { | |
| // Optimization: Create a smaller noise pattern and tile it? | |
| // For 4K, pixel-by-pixel noise in JS is slow (blocking main thread). | |
| // Let's use a faster approach: generate small noise canvas and drawImage tile it, or draw random pixels. | |
| // Or better: getImageData is slow. | |
| // Let's try drawing tiny rectangles? No, too many draw calls. | |
| // Let's stick to pixel manipulation but optimize or accept lag? | |
| // Current approach is fine for "generating", maybe add loading state. | |
| const imageData = ctx.getImageData(0, 0, w, h); | |
| const data = imageData.data; | |
| const len = data.length; | |
| for (let i = 0; i < len; i += 4) { | |
| // Optimization: Math.random() is somewhat slow. | |
| // Use a simple LCG or just accept it. | |
| if (Math.random() > 0.5) { // 50% density | |
| const noise = (Math.random() - 0.5) * 255 * opacity; | |
| data[i] = data[i] + noise; | |
| data[i+1] = data[i+1] + noise; | |
| data[i+2] = data[i+2] + noise; | |
| } | |
| } | |
| ctx.putImageData(imageData, 0, 0); | |
| } | |
| async function downloadImage(mode) { | |
| const btn = event.currentTarget; | |
| const originalHTML = btn.innerHTML; | |
| // Show loading | |
| document.getElementById('loading').classList.remove('hidden'); | |
| btn.disabled = true; | |
| btn.innerHTML = `<span class="text-xs">Generating...</span>`; | |
| // Wait for UI to update | |
| setTimeout(() => { | |
| // Switch mode temporarily | |
| const prevMode = currentMode; | |
| currentMode = mode; | |
| // Re-render at target resolution | |
| render(); | |
| // Download | |
| const link = document.createElement('a'); | |
| link.download = `wallpaper-${mode}-${Date.now()}.png`; | |
| link.href = canvas.toDataURL('image/png'); // High quality | |
| link.click(); | |
| // Restore | |
| currentMode = prevMode; | |
| render(); // Render back to preview size if we want optimization (but here we just use high res scaled down in preview) | |
| // Hide loading | |
| document.getElementById('loading').classList.add('hidden'); | |
| btn.innerHTML = originalHTML; | |
| btn.disabled = false; | |
| }, 100); | |
| } | |
| // Listen for Palette Regen specifically to reset positions? | |
| // Actually generatePalette calls render, which checks blobPositions. | |
| // We might want new positions on new palette? | |
| const originalGenPalette = generatePalette; | |
| generatePalette = function() { | |
| regenerateBlobPositions(parseInt(document.getElementById('complexity').value)); | |
| originalGenPalette(); | |
| } | |
| // Helper: HSL to Hex | |
| function hslToHex(hsl) { | |
| let [h, s, l] = hsl.match(/\d+(\.\d+)?/g).map(Number); | |
| l /= 100; | |
| const a = s * Math.min(l, 1 - l) / 100; | |
| const f = n => { | |
| const k = (n + h / 30) % 12; | |
| const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); | |
| return Math.round(255 * color).toString(16).padStart(2, '0'); | |
| }; | |
| return `#${f(0)}${f(8)}${f(4)}`; | |
| } | |
| </script> | |
| </body> | |
| </html> | |