first commit
This commit is contained in:
root
parent
05248059e2
commit
4e8e6cc296
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bild mit Farboverlay</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.canvas-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
.canvas-item {
|
||||
text-align: center;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Bild hochladen und Farboverlay hinzufügen</h1>
|
||||
|
||||
<input type="file" id="imageUpload" accept="image/*">
|
||||
<br><br>
|
||||
|
||||
<div class="canvas-container">
|
||||
<!-- 12 canvases with color inputs -->
|
||||
<div class="canvas-item">
|
||||
<canvas id="canvas-blau"></canvas>
|
||||
<input type="color" id="color-blau" value="#1670cc">
|
||||
</div>
|
||||
<div class="canvas-item">
|
||||
<canvas id="canvas-hellblau"></canvas>
|
||||
<input type="color" id="color-hellblau" value="#00a9ce">
|
||||
</div>
|
||||
<div class="canvas-item">
|
||||
<canvas id="canvas-gruen"></canvas>
|
||||
<input type="color" id="color-gruen" value="#7a9a01">
|
||||
</div>
|
||||
<div class="canvas-item">
|
||||
<canvas id="canvas-dunkelgruen"></canvas>
|
||||
<input type="color" id="color-dunkelgruen" value="#009681">
|
||||
</div>
|
||||
<div class="canvas-item">
|
||||
<canvas id="canvas-rot"></canvas>
|
||||
<input type="color" id="color-rot" value="#d13c3c">
|
||||
</div>
|
||||
<div class="canvas-item">
|
||||
<canvas id="canvas-violett"></canvas>
|
||||
<input type="color" id="color-violett" value="#772583">
|
||||
</div>
|
||||
<div class="canvas-item">
|
||||
<canvas id="canvas-red"></canvas>
|
||||
<input type="color" id="color-red" value="#ff0000">
|
||||
</div>
|
||||
<div class="canvas-item">
|
||||
<canvas id="canvas-green"></canvas>
|
||||
<input type="color" id="color-green" value="#00ff00">
|
||||
</div>
|
||||
<div class="canvas-item">
|
||||
<canvas id="canvas-yellow"></canvas>
|
||||
<input type="color" id="color-yellow" value="#ffff00">
|
||||
</div>
|
||||
<div class="canvas-item">
|
||||
<canvas id="canvas-blue"></canvas>
|
||||
<input type="color" id="color-blue" value="#0000ff">
|
||||
</div>
|
||||
<div class="canvas-item">
|
||||
<canvas id="canvas-purple"></canvas>
|
||||
<input type="color" id="color-purple" value="#800080">
|
||||
</div>
|
||||
<div class="canvas-item">
|
||||
<canvas id="canvas-pink"></canvas>
|
||||
<input type="color" id="color-pink" value="#ff69b4">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<button onclick="applyOverlayToAll()">Overlays anwenden</button>
|
||||
<br><br>
|
||||
<a id="downloadAll" href="#" style="display:none;">Alle Bilder herunterladen</a>
|
||||
|
||||
<script src="https://stuk.github.io/jszip/dist/jszip.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
// Kleiner Helfer für fleißige Moodle-Kurs-Ersteller:innen
|
||||
// Kachelbild hochladen --> unzählige Kacheln in verschiedenen Farben erhalten
|
||||
// einzeln oder als ZIP runterladen.
|
||||
// jesko@linuxmuster.net im Oktober 2024
|
||||
// Lizenz: GPL3
|
||||
//
|
||||
// Die Farben in der Context-Map, die englische Namen haben sind die standardfarben, die mit deutschen Namen sind die Farben aus dem Moodle-Kachelkursformat... Alles ist anpassbar. Have fun!
|
||||
|
||||
const imageUpload = document.getElementById('imageUpload');
|
||||
const downloadAllLink = document.getElementById('downloadAll');
|
||||
let img = new Image();
|
||||
let originalFileName = '';
|
||||
let originalImageData = {}; // To store the original image data for each canvas
|
||||
|
||||
const ctxMap = {
|
||||
"red": document.getElementById('canvas-red').getContext('2d'),
|
||||
"green": document.getElementById('canvas-green').getContext('2d'),
|
||||
"yellow": document.getElementById('canvas-yellow').getContext('2d'),
|
||||
"blue": document.getElementById('canvas-blue').getContext('2d'),
|
||||
"purple": document.getElementById('canvas-purple').getContext('2d'),
|
||||
"pink": document.getElementById('canvas-pink').getContext('2d'),
|
||||
"blau": document.getElementById('canvas-blau').getContext('2d'),
|
||||
"hellblau": document.getElementById('canvas-hellblau').getContext('2d'),
|
||||
"gruen": document.getElementById('canvas-gruen').getContext('2d'),
|
||||
"dunkelgruen": document.getElementById('canvas-dunkelgruen').getContext('2d'),
|
||||
"rot": document.getElementById('canvas-rot').getContext('2d'),
|
||||
"violett": document.getElementById('canvas-violett').getContext('2d'),
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Bild hochladen und darstellen
|
||||
imageUpload.addEventListener('change', function(event) {
|
||||
const file = event.target.files[0];
|
||||
originalFileName = file.name.split('.')[0]; // Originaldateinamen ohne Erweiterung speichern
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
img.src = e.target.result;
|
||||
img.onload = function() {
|
||||
setCanvasDimensions(); // Setze die Größe der Canvas entsprechend der Bildgröße
|
||||
drawImageOnAll(); // Zeige das Bild auf allen Canvas an
|
||||
saveOriginalImageData(); // Speichere die Original-Image-Daten
|
||||
applyOverlayToAll(); // Wende direkt nach dem Hochladen die Overlays an
|
||||
};
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
// Setze die Canvas-Größe auf die des hochgeladenen Bildes
|
||||
function setCanvasDimensions() {
|
||||
Object.values(ctxMap).forEach(ctx => {
|
||||
const canvas = ctx.canvas;
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
});
|
||||
}
|
||||
|
||||
// Zeichne das Originalbild auf alle Canvas-Elemente
|
||||
function drawImageOnAll() {
|
||||
Object.values(ctxMap).forEach(ctx => ctx.drawImage(img, 0, 0));
|
||||
}
|
||||
|
||||
// Speichere das Originalbild auf jedem Canvas, um es später wiederherstellen zu können
|
||||
function saveOriginalImageData() {
|
||||
Object.entries(ctxMap).forEach(([colorName, ctx]) => {
|
||||
originalImageData[colorName] = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||||
});
|
||||
}
|
||||
|
||||
// Stelle das Originalbild wieder her, bevor ein neues Overlay angewendet wird
|
||||
function restoreOriginalImage() {
|
||||
Object.entries(ctxMap).forEach(([colorName, ctx]) => {
|
||||
ctx.putImageData(originalImageData[colorName], 0, 0); // Originale Bilddaten zurücksetzen
|
||||
});
|
||||
}
|
||||
|
||||
// Wende das Overlay auf alle Canvas-Elemente an
|
||||
function applyOverlayToAll() {
|
||||
restoreOriginalImage(); // Stelle sicher, dass das Original wiederhergestellt wird
|
||||
// Führe die Overlays basierend auf den aktuellen Farben aus
|
||||
Object.entries(ctxMap).forEach(([colorName, ctx]) => {
|
||||
const color = document.getElementById(`color-${colorName}`).value;
|
||||
applyOverlay(ctx, color);
|
||||
});
|
||||
|
||||
// Zeige den Download-Link an
|
||||
downloadAllLink.style.display = 'block';
|
||||
downloadAllLink.textContent = `Alle Bilder als ${originalFileName}-gefärbt.zip herunterladen`;
|
||||
}
|
||||
|
||||
// Overlay-Funktion, die das Overlay auf ein Canvas-Element anwendet
|
||||
function applyOverlay(ctx, overlayColor) {
|
||||
const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||||
const data = imageData.data;
|
||||
|
||||
// Hex-Farbe in RGB umwandeln
|
||||
const rOverlay = parseInt(overlayColor.slice(1, 3), 16);
|
||||
const gOverlay = parseInt(overlayColor.slice(3, 5), 16);
|
||||
const bOverlay = parseInt(overlayColor.slice(5, 7), 16);
|
||||
|
||||
// Überlagere die nicht-transparenten Pixel
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
const alpha = data[i + 3];
|
||||
if (alpha > 0) {
|
||||
data[i] = (data[i] + rOverlay) / 2; // Rot
|
||||
data[i + 1] = (data[i + 1] + gOverlay) / 2; // Grün
|
||||
data[i + 2] = (data[i + 2] + bOverlay) / 2; // Blau
|
||||
}
|
||||
}
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
}
|
||||
|
||||
// ZIP-Download erstellen
|
||||
downloadAllLink.addEventListener('click', function() {
|
||||
const zip = new JSZip();
|
||||
|
||||
Object.entries(ctxMap).forEach(([colorName, ctx]) => {
|
||||
const colorCode = document.getElementById(`color-${colorName}`).value;
|
||||
const fileName = `${originalFileName}-${colorCode.slice(1)}.png`; // Name mit Farbcodes
|
||||
const dataUrl = ctx.canvas.toDataURL('image/png');
|
||||
const imgData = dataUrl.split(',')[1];
|
||||
zip.file(fileName, imgData, { base64: true });
|
||||
});
|
||||
|
||||
// ZIP-Datei zum Download erstellen
|
||||
zip.generateAsync({ type: 'blob' }).then(function(content) {
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(content);
|
||||
link.download = `${originalFileName}-gefärbt.zip`; // Name für ZIP-Datei
|
||||
link.click();
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue