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);
|
|||
|
|
|