Free online tool to convert jpg, png, gif, ico to webp image format online. No upload, just select image in tool and click convert to webp button. Once converted, download button is enabled to download webp image.
Here is a sample HTML, CSS, and JavaScript code that you can use to create a simple online tool to convert JPG, PNG, GIF, and ICO images to the WebP format:
<!-- HTML -->
<html>
<head>
<title>Image Converter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Image Converter</h1>
<input type="file" id="input-file" accept=".jpg,.png,.gif,.ico">
<button id="convert-button">Convert to WebP</button>
<a id="download-link" download="converted.webp">Download</a>
<script src="script.js"></script>
</body>
</html>
/* CSS */
#input-file {
display: none;
}
#convert-button {
display: inline-block;
padding: 0.5em 1em;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#download-link {
display: none;
font-size: 1.2em;
background-color: #00bcd4;
color: white;
padding: 0.5em 1em;
border-radius: 4px;
text-decoration: none;
}
// JavaScript
function convertToWebp(file, callback) {
var reader = new FileReader();
reader.onload = function() {
var image = new Image();
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
canvas.getContext('2d').drawImage(image, 0, 0);
var webpData = canvas.toDataURL('image/webp');
callback(webpData);
};
image.src = reader.result;
};
reader.readAsDataURL(file);
}
document.querySelector('#input-file').addEventListener('change', function() {
var file = this.files[0];
convertToWebp(file, function(webpData) {
document.querySelector('#download-link').href = webpData;
document.querySelector('#download-link').style.display = 'inline-block';
});
});
document.querySelector('#convert-button').addEventListener('click', function() {
document.querySelector('#input-file').click();
});
This code creates a file input field that allows the user to select an image file, a "Convert" button that initiates the conversion process, and a "Download" link that is displayed once the conversion is complete. The JavaScript code uses the
FileReader API to read the selected file, creates an image element and draws the image onto a canvas, and then uses the canvas.toDataURL() method to convert the image data to the WebP format
Comments
Post a Comment