Resize Image Downloader

Download resized version of single-image pages
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Resize Image Downloader
// @version      1.0
// @author       SleepingGiant
// @description  Download resized version of single-image pages
// @namespace    https://greasyforks.org/users/1395131
// @match        *://*/*.jpg
// @match        *://*/*.jpeg
// @match        *://*/*.png
// @match        *://*/*.webp
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const createUI = () => {
        const container = document.createElement('div');
        container.style.position = 'fixed';
        container.style.top = '20px';
        container.style.right = '20px';
        container.style.backgroundColor = '#222';
        container.style.color = 'white';
        container.style.padding = '10px';
        container.style.borderRadius = '10px';
        container.style.zIndex = '9999';
        container.style.display = 'flex';
        container.style.gap = '6px';
        container.style.alignItems = 'center';

        const widthInput = createInput('Width', 1200);
        const heightInput = createInput('Height', 1200);

        const button = document.createElement('button');
        button.textContent = '⬇️ Download';
        button.style.backgroundColor = '#007acc';
        button.style.color = 'white';
        button.style.border = 'none';
        button.style.padding = '6px 10px';
        button.style.fontSize = '13px';
        button.style.borderRadius = '6px';
        button.style.cursor = 'pointer';
        button.onclick = () => downloadResizedImage(widthInput, heightInput);

        container.appendChild(widthInput);
        container.appendChild(heightInput);
        container.appendChild(button);
        document.body.appendChild(container);
    };

    const createInput = (placeholder, value) => {
        const input = document.createElement('input');
        input.type = 'number';
        input.placeholder = placeholder;
        input.value = value;
        input.style.width = '70px';
        input.style.padding = '5px';
        input.style.fontSize = '13px';
        input.style.borderRadius = '6px';
        input.style.border = 'none';
        return input;
    };

    const downloadResizedImage = (widthInput, heightInput) => {
        const img = document.querySelector('img');
        if (!img) return alert('No image found');

        const width = parseInt(widthInput.value, 10);
        const height = parseInt(heightInput.value, 10);

        if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0) return alert('Invalid dimensions');

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

        canvas.toBlob(blob => {
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = `resized_${width}x${height}.jpg`;
            link.click();
        }, 'image/jpeg', 0.95);
    };

    // Initialize UI once document body is loaded
    const interval = setInterval(() => {
        if (document.body) {
            createUI();
            clearInterval(interval);
        }
    }, 200);

})();