Skip to content

Instantly share code, notes, and snippets.

@simonw
Created October 21, 2024 18:24
Show Gist options
  • Save simonw/7026fe5051ba138eb15ef82f4936eaed to your computer and use it in GitHub Desktop.
Save simonw/7026fe5051ba138eb15ef82f4936eaed to your computer and use it in GitHub Desktop.

Image Converter and HTML Exporter

human (Oct 18, 2024, 09:21 AM)

Build an artifact - no react - which lets you open an image and then converts that to a 600 of wide 0.9 quality JPEG and shows it on the page - once displayed show a "Download page" link that downloads an HTML copy of the current page that bakes in that image as a data uri

assistant (Oct 18, 2024, 09:21 AM)

Certainly! I'll create an HTML artifact that allows you to open an image, convert it to a 600px wide JPEG with 0.9 quality, display it on the page, and then provide a download link for an HTML copy of the page with the image baked in as a data URI.

Image Converter and Page Downloader

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Converter and Page Downloader</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #imageContainer {
            max-width: 600px;
            margin-top: 20px;
        }
        #convertedImage {
            max-width: 100%;
            height: auto;
        }
        #downloadLink {
            display: none;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Image Converter and Page Downloader</h1>
    <input type="file" id="imageInput" accept="image/*">
    <div id="imageContainer"></div>
    <a id="downloadLink" href="#" download="converted_image_page.html">Download Page</a>

    <script>
        const imageInput = document.getElementById('imageInput');
        const imageContainer = document.getElementById('imageContainer');
        const downloadLink = document.getElementById('downloadLink');

        imageInput.addEventListener('change', handleImageUpload);

        function handleImageUpload(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const img = new Image();
                    img.onload = function() {
                        const canvas = document.createElement('canvas');
                        const ctx = canvas.getContext('2d');
                        const scaleFactor = 600 / img.width;
                        canvas.width = 600;
                        canvas.height = img.height * scaleFactor;
                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                        
                        const convertedDataUrl = canvas.toDataURL('image/jpeg', 0.9);
                        displayConvertedImage(convertedDataUrl);
                        createDownloadableHtml(convertedDataUrl);
                    };
                    img.src = event.target.result;
                };
                reader.readAsDataURL(file);
            }
        }

        function displayConvertedImage(dataUrl) {
            imageContainer.innerHTML = `<img id="convertedImage" src="${dataUrl}" alt="Converted Image">`;
        }

        function createDownloadableHtml(dataUrl) {
            const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Converted Image</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Converted Image</h1>
    <img src="${dataUrl}" alt="Converted Image">
</body>
</html>`;

            const blob = new Blob([htmlContent], { type: 'text/html' });
            const url = URL.createObjectURL(blob);
            downloadLink.href = url;
            downloadLink.style.display = 'inline-block';
        }
    </script>
</body>
</html>

I've created an HTML artifact that fulfills your requirements. Here's a breakdown of its functionality:

  1. It provides a file input for selecting an image.
  2. When an image is selected, it's converted to a 600px wide JPEG with 0.9 quality using a canvas element.
  3. The converted image is displayed on the page.
  4. A "Download Page" link appears, which allows the user to download an HTML file containing the converted image as a data URI.

To use this page:

  1. Open the HTML file in a web browser.
  2. Click on the file input to select an image.
  3. Once the image is converted and displayed, you'll see a "Download Page" link.
  4. Click the link to download an HTML file with the embedded image.

This solution uses only HTML, CSS, and JavaScript, without any external libraries or frameworks. The downloaded HTML file will contain the converted image as a data URI, making it self-contained and easily shareable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment