The Deep North: Javascript webp to png converter

[Done with programmer's assistants: Gemini, DALL-E]
OpenAI's DALL-E produces images, but as webp files which can be awkward to work with. I have code here below for a web page that you can save locally that will allow you to select and convert a webp file. Meantime, here's the working conversion routine:

Convert WebP to PNG

OpenAI should fix this (as well as the response issues which has me using Gemini and Poe more often than not). Having to convert the image is a dumb workaround, but that is what you are left with. I have, in the past had to do various things with images, and although it can be a bit awkward if you are not familiar with it, ImageMagick is surprisingly competent with conversions and a vanilla type conversion is intuitively simple. Confusingly, the ImageMagick executable is 'convert'. To convert a webp to a png:

magick convert WhyThis.webp WhyThis.png

** With some installations, convert can be called on its own: convert in.webp out.png

You can find ImageMagick here.

https://imagemagick.org/index.php

Note: I took a look at the files output as webp, gif, and png . The webp savings in size are considerate:

657,688 in.webp

1,247,110 Out.gif

3,391,612 Out.png

If I were in charge, I probably would have gone with the webp as well, but I would have made it clear it was happening, and why, and I would have provided a tool to at least convert that locally.

HTML Page -- Convert WebP to PNG

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebP to PNG Converter</title>
</head>
<body>

<div>
    <h3>Convert WebP to PNG</h3>
    <input accept="image/webp" id="webpInput" type="file" />
    <button id="convertButton" style="display: none;">Convert</button> 
    <span id="conversionStatus"></span>
    <a id="downloadLink" style="display: none;">Download PNG</a>

webpInput.addEventListener('change', () => {
            convertButton.style.display = 'block'; // Show button when file is chosen
        });

convertButton.addEventListener('click', () => {
            const webpFile = webpInput.files[0];

if (webpFile) {
                convertButton.disabled = true;
                conversionStatus.textContent = 'Converting...';

const reader = new FileReader();
                reader.readAsDataURL(webpFile);

reader.onloadend = () => {
                    const img = new Image();
                    img.src = reader.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);

const pngData = canvas.toDataURL('image/png');
                        downloadLink.href = pngData;
                        downloadLink.download = 'converted_image.png';
                        downloadLink.style.display = 'block'; 
                        downloadLink.click();

conversionStatus.textContent = 'Download Ready!'; 
                        convertButton.disabled = false;
                    };
                };
            } else {
                alert('Please select a WebP file.');
            }
        });
    </script>
</div>
</body>
</html>

The Deep North

Monday, February 26, 2024

Javascript webp to png converter

HTML Page -- Convert WebP to PNG

No comments:

Theory of Evolution Through Natural Selection

Other Places

Local Machine