Online PNG Image to WebP Converter | PNG to WebP Converter
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>PNG to WebP Converter</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>
<style>
#image-preview {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class=”container”>
<h1 class=”center-align”>PNG to WebP Converter</h1>
<div class=”row”>
<div class=”col s12″>
<div class=”card”>
<div class=”card-content”>
<div class=”file-field input-field”>
<div class=”btn”>
<span>Choose PNG</span>
<input type=”file” accept=”image/png” id=”png-file” />
</div>
<div class=”file-path-wrapper”>
<input class=”file-path validate” type=”text” placeholder=”Select a PNG file” />
</div>
</div>
<div class=”center-align”>
<button class=”btn waves-effect waves-light” id=”convert-btn”>Convert to WebP</button>
</div>
</div>
</div>
<div class=”card”>
<div class=”card-image”>
<img id=”image-preview” src=”” alt=”Converted WebP Image” />
</div>
</div>
</div>
</div>
</div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
var pngFileInput = document.getElementById(‘png-file’);
var convertButton = document.getElementById(‘convert-btn’);
var imagePreview = document.getElementById(‘image-preview’);
convertButton.addEventListener(‘click’, function() {
var file = pngFileInput.files[0];
if (file) {
var reader = new FileReader();
reader.onloadend = function() {
var image = new Image();
image.src = reader.result;
image.onload = function() {
var canvas = document.createElement(‘canvas’);
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext(‘2d’);
ctx.drawImage(image, 0, 0);
var webpData = canvas.toDataURL(‘image/webp’);
// Set the converted image as the preview
imagePreview.src = webpData;
// Add a download link
var downloadLink = document.createElement(‘a’);
downloadLink.href = webpData;
downloadLink.download = ‘converted.webp’;
downloadLink.innerText = ‘Download WebP’;
downloadLink.classList.add(‘btn’, ‘waves-effect’, ‘waves-light’);
imagePreview.parentNode.insertBefore(downloadLink, imagePreview.nextSibling);
};
};
reader.readAsDataURL(file);
} else {
imagePreview.src = ”;
}
});
});
</script>
</body>
</html>