84 lines
3.1 KiB
JavaScript
84 lines
3.1 KiB
JavaScript
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));
|
|
}
|