2024-10-23 19:14:08 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="de">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2024-10-23 19:44:43 +02:00
|
|
|
<title>Bild mit Farboverlay verschiedener Farben einfärben</title>
|
2024-10-23 19:14:08 +02:00
|
|
|
<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>
|
|
|
|
|
|
2024-10-23 19:44:43 +02:00
|
|
|
<h1>Moodle-Kachel-Colorizer - aus einer Kachel mach' ich 12 bunte</h1>
|
|
|
|
|
<hr>
|
|
|
|
|
1. Kachelbild hochladen
|
2024-10-23 19:14:08 +02:00
|
|
|
<input type="file" id="imageUpload" accept="image/*">
|
2024-10-23 19:44:43 +02:00
|
|
|
<div id="imageDimensions" style="margin-top: 10px;"></div>
|
|
|
|
|
<hr>
|
2024-10-23 19:14:08 +02:00
|
|
|
<br><br>
|
|
|
|
|
|
2024-10-23 19:44:43 +02:00
|
|
|
2. bei Bedarf Farben einstellen
|
2024-10-23 19:14:08 +02:00
|
|
|
<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>
|
|
|
|
|
|
