Convert, Compress, Resize JPG, PNG, WEBP to JPG, PNG, WEBP

<!-- Polyfill for canvas.toBlob() -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.29.0/js/canvas-to-blob.min.js"></script>
<!-- FileSaver.js for saving files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<style>
input, select, button { padding: 20px; }
</style>

<form id="imageForm">
    <input type="file" id="imageInput" accept=".png, .jpg, .jpeg, .webp" multiple />
    <input type="number" id="resizeWidth" placeholder="Width (px), empty no change, height auto" style="width:260px" />
    <select id="formatSelect">
        <option value="image/webp">WebP</option>
        <option value="image/png">PNG</option>
        <option value="image/jpg">JPG</option>
    </select>
    <button type="submit" style="background:black; color:White; cursor:pointer">Convert</button>
</form>

<div id="pasteArea" style="border:1px dashed gray; width:; height:150px; text-align:center; line-height:150px; cursor:pointer">
    Click here and Press Ctrl+V (or CMD+V) to paste an image from clipboard.
</div>

<script>
document.getElementById('imageForm').addEventListener('submit', function(e) {
    e.preventDefault();
    let fileInput = document.getElementById('imageInput');
    let resizeWidth = document.getElementById('resizeWidth').value;
    let format = document.getElementById('formatSelect').value;
    let files = fileInput.files;

    if (files.length > 0) {
        Array.from(files).forEach(file => {
            let reader = new FileReader();
            reader.onload = function(event) {
                convertImage(event.target.result, resizeWidth, format, function(convertedBlob) {
                    let fileNameWithoutExtension = file.name.replace(/\.[^/.]+$/, "");
                    let extension = format.split('/')[1];
                    saveAs(convertedBlob, `${fileNameWithoutExtension}.${extension}`);
                });
            };
            reader.readAsDataURL(file);
        });
    } else {
        alert('Please select one or more images.');
    }
});

function convertImage(imageUrl, width, format, callback) {
    let img = new Image();
    img.src = imageUrl;
    img.onload = function() {
        let canvas = document.createElement('canvas');
        let scale = width ? width / img.width : 1;
        canvas.width = img.width * scale;
        canvas.height = img.height * scale;

        let ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(function(blob) {
            callback(blob);
        }, format, 0.85);
    };
}

document.addEventListener('paste', function(e) {
    e.preventDefault();
    let format = document.getElementById('formatSelect').value; // Use selected format
    let items = (e.clipboardData || window.clipboardData).items;
    for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
            let blob = items[i].getAsFile();
            let reader = new FileReader();
            reader.onload = function(event) {
                convertImage(event.target.result, null, format, function(convertedBlob) {
                    saveAs(convertedBlob, generateFilename(format));
                });
            };
            reader.readAsDataURL(blob);
            return;
        }
    }
});

function generateFilename(format) {
    let now = new Date();
    let datetime = `${now.getSeconds()}${now.getMilliseconds()}`;
    let extension = format.split('/')[1];
    return `image-${datetime}.${extension}`;
}
</script>