It's pretty simple, but probably only supports converting .webp>.png formats.
I tried to utilize AI to create a Converter Tool that can be applied to the TalkImg Photo Hosting website, and this is the result.
HTML:JavaScript (image-converter.js):document.getElementById('imageConverterForm').addEventListener('submit', function(event) {
event.preventDefault();
var imageFile = document.getElementById('imageFile').files[0];
var outputFormat = document.getElementById('outputFormat').value;
var reader = new FileReader();
reader.onload = function(event) {
var image = new Image();
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
var convertedImageURL = canvas.toDataURL('image/' + outputFormat);
var resultDiv = document.getElementById('result');
resultDiv.innerHTML = '
Gambar yang dikonversi:
';
};
image.src = event.target.result;
};
reader.readAsDataURL(imageFile);
});
.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 10px;
}
Written with Javascript programming language using HTML and CSS interfaces, just needs to be adjusted according to your needs.
In the example that has been created above, users can choose the output format JPEG, PNG, or GIF,
and need to create three separate files with the above code:
index.html,
image-converter.js, and
style.css.
and Make sure to save all three files in the same location, and open
index.html in a web browser to view and use the Image Converter.
This is just an example for your reference material @joker_josue
