Farbe aus Bild
```
CSS für Dropzone in `style.css` ergänzen:
```css
#picker-dropzone {
border: 2px dashed #ccc;
border-radius: 8px;
padding: 2rem;
text-align: center;
margin-bottom: 1rem;
background: #fafafa;
}
#picker-dropzone.drag-over {
border-color: #222;
background: #f0f0f0;
}
#picker-dropzone p { margin-bottom: 0.75rem; color: #666; font-size: 0.9rem; }
```
- [ ] **Schritt 2: `js/picker.js` erstellen**
```js
import { rgbToHex, rgbToHsl } from './converter.js';
import { state } from './app.js';
function rgbToDisplay({ r, g, b }) { return r + ', ' + g + ', ' + b; }
function hslToDisplay({ h, s, l }) { return h + ', ' + s + '%, ' + l + '%'; }
function showColor(r, g, b) {
const hex = rgbToHex({ r, g, b });
const hsl = rgbToHsl({ r, g, b });
state.setColor(hsl);
document.getElementById('picker-preview').style.background = hex;
document.getElementById('picker-hex').value = hex;
document.getElementById('picker-rgb').value = rgbToDisplay({ r, g, b });
document.getElementById('picker-hsl').value = hslToDisplay(hsl);
document.getElementById('picker-result').style.display = 'block';
}
function loadImage(file) {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const canvas = document.getElementById('picker-canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.style.display = 'block';
// Mittlerer Pixel als Vorschlag
const mx = Math.floor(img.width / 2);
const my = Math.floor(img.height / 2);
const px = ctx.getImageData(mx, my, 1, 1).data;
showColor(px[0], px[1], px[2]);
// Eyedropper: Klick wählt Pixel frei
canvas.onclick = (ev) => {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const x = Math.floor((ev.clientX - rect.left) * scaleX);
const y = Math.floor((ev.clientY - rect.top) * scaleY);
const d = ctx.getImageData(x, y, 1, 1).data;
showColor(d[0], d[1], d[2]);
};
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
export function initPicker(onSaveFavorit, onSaveSchema) {
const dropzone = document.getElementById('picker-dropzone');
document.getElementById('picker-file-trigger').addEventListener('click', () => {
document.getElementById('picker-file-input').click();
});
document.getElementById('picker-file-input').addEventListener('change', (e) => {
if (e.target.files[0]) loadImage(e.target.files[0]);
});
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
dropzone.classList.add('drag-over');
});
dropzone.addEventListener('dragleave', () => dropzone.classList.remove('drag-over'));
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
dropzone.classList.remove('drag-over');
const file = e.dataTransfer.files[0];
if (file && file.type.startsWith('image/')) loadImage(file);
});
// Paste (Strg+V / Cmd+V)
document.addEventListener('paste', (e) => {
const item = Array.from(e.clipboardData.items).find(i => i.type.startsWith('image/'));
if (item) loadImage(item.getAsFile());
});
document.getElementById('picker-fav-btn').addEventListener('click', () => onSaveFavorit(state.color));
document.getElementById('picker-schema-btn').addEventListener('click', () => onSaveSchema(state.color));
}
```
- [ ] **Schritt 3: `initPicker` in `app.js` einbinden**
Ergänzen (nach den bestehenden Imports):
```js
import { initPicker } from './picker.js';
initPicker(addFavorit, addColorToSchema);
```
- [ ] **Schritt 4: Im Browser testen**
- Screenshot mit `Cmd+Shift+4` (Mac) erstellen → mit `Cmd+V` einfügen → Bild erscheint, mittlerer Pixel wird vorgeschlagen
- Auf beliebigen Punkt im Bild klicken → Farbe wechselt
- Datei hochladen über "Datei wählen" → funktioniert gleich
- Bild per Drag & Drop ins Dropzone-Feld ziehen → Bild lädt
- [ ] **Schritt 5: Committen**
```bash
git add index.html style.css js/picker.js js/app.js
git commit -m "feat: Picker-Tab mit Upload, Paste und Eyedropper"
```
---
### Task 5: Harmonien-Tab
**Files:**
- Modify: `index.html` — Harmonien-Tab-Inhalt
- Create: `js/harmonien.js`
- Modify: `js/app.js` — Harmonien initialisieren
- [ ] **Schritt 1: HTML für Harmonien-Tab in `index.html` ersetzen**
```html