Webp
Met deze prompt maak je 1 html bestand met alle code om een afbeelding om te zetten naar een geoptimaliseerde webp afbeelding. Deze prompt dient als voorbeeld van tabel 15 voor het boek: Het Basisboek AI.
Prompt
Schrijf een stuk code in 1 html bestand. Dit bestand moet afbeeldingen zoals .jpg en .png kunnen omzetten naar .webp. De bestandsgrootte moet geoptimaliseerd worden, maar de kwaliteit van de afbeelding moet behouden worden.Example Output
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Afbeelding naar WebP Converter</title>
<style>
:root {
--primary-color: #007bff;
--secondary-color: #f8f9fa;
--border-color: #dee2e6;
--text-color: #212529;
--background-color: #ffffff;
--success-color: #28a745;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
background-color: var(--secondary-color);
color: var(--text-color);
margin: 0;
padding: 20px;
}
.container {
max-width: 900px;
margin: auto;
background: var(--background-color);
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
h1 {
color: var(--primary-color);
text-align: center;
margin-bottom: 1rem;
}
p {
text-align: center;
margin-bottom: 2rem;
}
.controls {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2rem;
padding: 1.5rem;
border: 1px dashed var(--border-color);
border-radius: 8px;
}
.file-input-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="file"] {
display: none;
}
.file-label {
display: inline-block;
padding: 12px 25px;
background-color: var(--primary-color);
color: white;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.file-label:hover {
background-color: #0056b3;
}
#file-info {
margin-top: 10px;
font-style: italic;
color: #6c757d;
}
.quality-control {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.quality-control label {
font-weight: bold;
}
#qualitySlider {
width: 80%;
max-width: 300px;
}
#convertBtn {
padding: 12px 25px;
font-size: 1rem;
font-weight: bold;
color: white;
background-color: var(--success-color);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease, opacity 0.2s ease;
align-self: center;
}
#convertBtn:disabled {
background-color: #6c757d;
cursor: not-allowed;
opacity: 0.7;
}
#results {
margin-top: 2rem;
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.result-card {
background: var(--secondary-color);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.previews {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
text-align: center;
}
.previews img {
max-width: 100%;
height: auto;
border-radius: 5px;
border: 1px solid var(--border-color);
}
.image-info {
font-size: 0.9rem;
}
.image-info strong {
color: var(--primary-color);
}
.download-btn {
display: inline-block;
margin-top: 10px;
text-decoration: none;
padding: 10px 20px;
background: var(--primary-color);
color: white;
border-radius: 5px;
text-align: center;
transition: background-color 0.2s ease;
}
.download-btn:hover {
background-color: #0056b3;
}
.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
width: 36px;
height: 36px;
border-radius: 50%;
border-left-color: var(--primary-color);
animation: spin 1s ease infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<h1>Afbeelding naar WebP Converter</h1>
<p>Converteer uw JPG- en PNG-afbeeldingen naar het moderne, geoptimaliseerde WebP-formaat.</p>
<div class="controls">
<div class="file-input-wrapper">
<label for="imageInput" class="file-label">Kies Afbeeldingen</label>
<input type="file" id="imageInput" accept="image/jpeg, image/png" multiple>
<span id="file-info">Geen bestanden geselecteerd</span>
</div>
<div class="quality-control">
<label for="qualitySlider">Kwaliteit: <span id="qualityValue">80</span>%</label>
<input type="range" id="qualitySlider" min="0" max="1" step="0.05" value="0.8">
</div>
<button id="convertBtn" disabled>Converteren</button>
</div>
<div id="results">
<!-- Resultaten worden hier dynamisch ingevoegd -->
</div>
</div>
<script>
const imageInput = document.getElementById('imageInput');
const fileInfo = document.getElementById('file-info');
const qualitySlider = document.getElementById('qualitySlider');
const qualityValue = document.getElementById('qualityValue');
const convertBtn = document.getElementById('convertBtn');
const resultsDiv = document.getElementById('results');
// Event listeners
imageInput.addEventListener('change', handleFileSelect);
qualitySlider.addEventListener('input', updateQualityDisplay);
convertBtn.addEventListener('click', processImages);
function handleFileSelect(event) {
const files = event.target.files;
if (files.length > 0) {
fileInfo.textContent = `${files.length} bestand(en) geselecteerd.`;
convertBtn.disabled = false;
} else {
fileInfo.textContent = 'Geen bestanden geselecteerd';
convertBtn.disabled = true;
}
}
function updateQualityDisplay() {
qualityValue.textContent = Math.round(qualitySlider.value * 100);
}
function processImages() {
const files = imageInput.files;
const quality = parseFloat(qualitySlider.value);
if (files.length === 0) {
alert('Selecteer eerst een of meerdere afbeeldingen.');
return;
}
// Reset UI
resultsDiv.innerHTML = '<div class="spinner"></div>';
convertBtn.disabled = true;
convertBtn.textContent = 'Bezig met verwerken...';
const conversionPromises = Array.from(files).map(file => {
return convertImageToWebP(file, quality);
});
Promise.all(conversionPromises)
.then(results => {
resultsDiv.innerHTML = ''; // Clear spinner
results.forEach(res => displayResult(res));
})
.catch(error => {
console.error('Er is een fout opgetreden:', error);
resultsDiv.innerHTML = `<p style="color: red;">Er is een fout opgetreden tijdens de conversie. Controleer de console voor details.</p>`;
})
.finally(() => {
convertBtn.disabled = false;
convertBtn.textContent = 'Converteren';
});
}
function convertImageToWebP(file, quality) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
const img = new Image();
img.src = event.target.result;
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.toBlob(
(blob) => {
if (blob) {
resolve({
originalFile: file,
originalSrc: img.src,
webpBlob: blob
});
} else {
reject(new Error('Canvas toBlob conversie mislukt.'));
}
},
'image/webp',
quality
);
};
img.onerror = reject;
};
reader.onerror = reject;
});
}
function displayResult({ originalFile, originalSrc, webpBlob }) {
const webpUrl = URL.createObjectURL(webpBlob);
const originalSize = formatBytes(originalFile.size);
const webpSize = formatBytes(webpBlob.size);
const originalName = originalFile.name.split('.').slice(0, -1).join('.');
const webpName = `${originalName}.webp`;
const percentageReduction = Math.round(((originalFile.size - webpBlob.size) / originalFile.size) * 100);
const card = document.createElement('div');
card.className = 'result-card';
card.innerHTML = `
<h3>${originalFile.name}</h3>
<div class="previews">
<div class="image-container">
<h4>Origineel (${originalFile.type})</h4>
<img src="${originalSrc}" alt="Originele afbeelding">
<div class="image-info">
<strong>Grootte:</strong> ${originalSize}
</div>
</div>
<div class="image-container">
<h4>Geconverteerd (WebP)</h4>
<img src="${webpUrl}" alt="WebP afbeelding">
<div class="image-info">
<strong>Grootte:</strong> ${webpSize} <span style="color:${percentageReduction > 0 ? 'var(--success-color)' : 'red'}; font-weight:bold;">(${percentageReduction > 0 ? '-' : '+'}${percentageReduction}%)</span>
</div>
</div>
</div>
<a href="${webpUrl}" download="${webpName}" class="download-btn">Download ${webpName}</a>
`;
resultsDiv.appendChild(card);
}
function formatBytes(bytes, decimals = 2) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
</script>
</body>
</html>