Patrick
61 lines
2.2 KiB
JavaScript
61 lines
2.2 KiB
JavaScript
// ═══════════════════════════════════════════════════════
|
||
// Placeholder Image Generator
|
||
// ═══════════════════════════════════════════════════════
|
||
function generatePlaceholder() {
|
||
const w = parseInt(document.getElementById('phWidth').value) || 400;
|
||
const h = parseInt(document.getElementById('phHeight').value) || 300;
|
||
const text = document.getElementById('phText').value || `${w} × ${h}`;
|
||
const bg = document.getElementById('phBg').value;
|
||
const fg = document.getElementById('phFg').value;
|
||
const fontSize = parseInt(document.getElementById('phFontSize').value) || 28;
|
||
|
||
document.getElementById('phBgText').value = bg;
|
||
document.getElementById('phFgText').value = fg;
|
||
document.getElementById('phFontSizeVal').textContent = fontSize + 'px';
|
||
|
||
const canvas = document.getElementById('phCanvas');
|
||
canvas.width = w;
|
||
canvas.height = h;
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
// Background
|
||
ctx.fillStyle = bg;
|
||
ctx.fillRect(0, 0, w, h);
|
||
|
||
// Cross lines
|
||
ctx.strokeStyle = fg + '20';
|
||
ctx.lineWidth = 1;
|
||
ctx.beginPath();
|
||
ctx.moveTo(0, 0); ctx.lineTo(w, h);
|
||
ctx.moveTo(w, 0); ctx.lineTo(0, h);
|
||
ctx.stroke();
|
||
|
||
// Text
|
||
ctx.fillStyle = fg;
|
||
ctx.font = `${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(text, w / 2, h / 2);
|
||
}
|
||
|
||
function downloadPlaceholder() {
|
||
const canvas = document.getElementById('phCanvas');
|
||
const link = document.createElement('a');
|
||
const w = document.getElementById('phWidth').value || 400;
|
||
const h = document.getElementById('phHeight').value || 300;
|
||
link.download = `placeholder-${w}x${h}.png`;
|
||
link.href = canvas.toDataURL('image/png');
|
||
link.click();
|
||
setStatus('phStatus', 'success', 'Downloaded ✓');
|
||
}
|
||
|
||
function copyPlaceholderDataUrl() {
|
||
const canvas = document.getElementById('phCanvas');
|
||
copyText(canvas.toDataURL('image/png'));
|
||
setStatus('phStatus', 'success', 'Data URL copied ✓');
|
||
}
|
||
|
||
// Initialize on load
|
||
setTimeout(generatePlaceholder, 100);
|
||
|