K
Kohlkarpfen
New member
- Beiträge
- 1
- Punkte Reaktionen
- 0
Ich würde gerne ein div als Bild speichern, aber das funktioniert leider nicht und ich weiß nicht warum.
Kann mir bitte jemand helfen? Danke
Kann mir bitte jemand helfen? Danke
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bilder Beschriften und Speichern</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
body { font-family: Arial, sans-serif; text-align: center; background: transparent; }
.container {
display: flex;
justify-content: center;
gap: 20px;
position: relative;
padding: 20px;
}
.image-container {
position: relative;
width: 250px;
height: 300px;
text-align: center;
}
.background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
img.uploaded {
max-width: 200px;
max-height: 200px;
display: block;
position: relative;
margin: auto;
margin-top: 25px;
}
.caption {
margin-top: 5px;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 5px;
text-align: center;
width: 100%;
position: relative;
}
.hidden { display: none !important; }
</style>
</head>
<body>
<h1>Bilder Beschriften und Speichern</h1>
<div class="container" id="image-area">
<div class="image-container">
<img src="background.png" class="background" alt="Hintergrundbild">
<input type="file" accept="image/*" onchange="loadImage(event, 0)">
<img id="img0" class="uploaded" src="" alt="Bild 1" style="display:none;">
<input type="text" placeholder="Beschriftung" oninput="updateCaption(0)">
<div class="caption" id="caption0"></div>
</div>
<div class="image-container">
<img src="background.png" class="background" alt="Hintergrundbild">
<input type="file" accept="image/*" onchange="loadImage(event, 1)">
<img id="img1" class="uploaded" src="" alt="Bild 2" style="display:none;">
<input type="text" placeholder="Beschriftung" oninput="updateCaption(1)">
<div class="caption" id="caption1"></div>
</div>
<div class="image-container">
<img src="background.png" class="background" alt="Hintergrundbild">
<input type="file" accept="image/*" onchange="loadImage(event, 2)">
<img id="img2" class="uploaded" src="" alt="Bild 3" style="display:none;">
<input type="text" placeholder="Beschriftung" oninput="updateCaption(2)">
<div class="caption" id="caption2"></div>
</div>
</div>
<button id="save-btn" onclick="saveAsImage()">Speichern als Bild</button>
<script>
function loadImage(event, index) {
const img = document.getElementById(`img${index}`);
img.src = URL.createObjectURL(event.target.files[0]);
img.style.display = 'block';
}
function updateCaption(index) {
const caption = document.getElementById(`caption${index}`);
const input = document.querySelectorAll('input[type="text"]')[index];
caption.textContent = input.value;
}
function saveAsImage() {
const imageArea = document.getElementById('image-area');
//const inputs = document.querySelectorAll('input');
//const button = document.getElementById('save-btn');
//inputs.forEach(input => input.classList.add('hidden'));
//button.classList.add('hidden');
html2canvas(imageArea, { backgroundColor: null, scale: 2 }).then(canvas => {
//inputs.forEach(input => input.classList.remove('hidden'));
//button.classList.remove('hidden');
const link = document.createElement('a');
link.href = canvas.toDataURL("image/png");
link.download = 'bild.png';
document.body.appendChild(link);
link.click();
});
}
</script>
</body>
</html>