az
/
moodle-kachel-colorizer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lizenz angepasst

This commit is contained in:
root 2024-10-23 19:44:43 +02:00
parent 4e8e6cc296
commit 1320b29b43
2 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bild mit Farboverlay</title> <title>Bild mit Farboverlay verschiedener Farben einf&auml;rben</title>
<style> <style>
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@ -27,11 +27,15 @@
</head> </head>
<body> <body>
<h1>Bild hochladen und Farboverlay hinzufügen</h1> <h1>Moodle-Kachel-Colorizer - aus einer Kachel mach' ich 12 bunte</h1>
<hr>
1. Kachelbild hochladen
<input type="file" id="imageUpload" accept="image/*"> <input type="file" id="imageUpload" accept="image/*">
<div id="imageDimensions" style="margin-top: 10px;"></div>
<hr>
<br><br> <br><br>
2. bei Bedarf Farben einstellen
<div class="canvas-container"> <div class="canvas-container">
<!-- 12 canvases with color inputs --> <!-- 12 canvases with color inputs -->
<div class="canvas-item"> <div class="canvas-item">

13
script.js
View File

@ -2,8 +2,11 @@
// Kachelbild hochladen --> unzählige Kacheln in verschiedenen Farben erhalten // Kachelbild hochladen --> unzählige Kacheln in verschiedenen Farben erhalten
// einzeln oder als ZIP runterladen. // einzeln oder als ZIP runterladen.
// jesko@linuxmuster.net im Oktober 2024 // jesko@linuxmuster.net im Oktober 2024
// Lizenz: GPL3 // Lizenz: MIT oder GPLv3
// //
// Das Skript nutzt JSZip von Stuart Knightley, um die Bilder beim Download in eine Zip-Datei zu packen. <http://stuartk.com/jszip>
//
//
// 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! // 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 imageUpload = document.getElementById('imageUpload');
@ -42,6 +45,7 @@ imageUpload.addEventListener('change', function(event) {
drawImageOnAll(); // Zeige das Bild auf allen Canvas an drawImageOnAll(); // Zeige das Bild auf allen Canvas an
saveOriginalImageData(); // Speichere die Original-Image-Daten saveOriginalImageData(); // Speichere die Original-Image-Daten
applyOverlayToAll(); // Wende direkt nach dem Hochladen die Overlays an applyOverlayToAll(); // Wende direkt nach dem Hochladen die Overlays an
displayImageDimensions(img.width, img.height); // zeige die Bildmaße an
}; };
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
@ -56,6 +60,11 @@ function setCanvasDimensions() {
}); });
} }
function displayImageDimensions(width, height) {
const dimensionsDiv = document.getElementById('imageDimensions');
dimensionsDiv.innerHTML = `Bildmaße: ${width} px (B) x ${height} px (H)`; // Zeige die Maße an
}
// Zeichne das Originalbild auf alle Canvas-Elemente // Zeichne das Originalbild auf alle Canvas-Elemente
function drawImageOnAll() { function drawImageOnAll() {
Object.values(ctxMap).forEach(ctx => ctx.drawImage(img, 0, 0)); Object.values(ctxMap).forEach(ctx => ctx.drawImage(img, 0, 0));
@ -86,7 +95,7 @@ function applyOverlayToAll() {
// Zeige den Download-Link an // Zeige den Download-Link an
downloadAllLink.style.display = 'block'; downloadAllLink.style.display = 'block';
downloadAllLink.textContent = `Alle Bilder als ${originalFileName}-gefärbt.zip herunterladen`; downloadAllLink.textContent = `alle Bilder als ZIP-Datei herunterladen (${originalFileName}-gefärbt.zip)`;
} }
// Overlay-Funktion, die das Overlay auf ein Canvas-Element anwendet // Overlay-Funktion, die das Overlay auf ein Canvas-Element anwendet