zoutepopcorn/webextension_resize.html

## webextension_resize.html
<html>
<body>
<input type="file" class="choose" value=""><br/>

<img id="original-image" width="300px"><br/><br>

<div id="images">

</div>

<div id="download" onclick="zipIt()">DOWNLOAD</div>

32.png, 72.png, 512.png

<style>
    #images {
        background: #ccc;
        width: 96vw;
        height: 540px;
        padding-top: 10px;
    }
    html, body {
        margin: 1vw;
    }

    #original-image {
        display: none;
    }

    .choose::-webkit-file-upload-button {
        color: white;
        display: inline-block;
        background: #1CB6E0;
        border: none;
        padding: 7px 15px;
        font-weight: 700;
        border-radius: 3px;
        white-space: nowrap;
        cursor: pointer;
        font-size: 10pt;
    }

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity="sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"
        integrity="sha512-XMVd28F1oH/O71fzwBnV7HucLxVwtxf26XV8P4wPk26EDxuGZ91N8bsOttmnomcCD3CS5ZMRL50H0GgOHvegtg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>

    const input = document.getElementsByTagName('input')[0];
    const SIZES = [32, 72, 128, 512];

    input.onclick = function () {
        this.value = null;
    };

    input.onchange = function () {
        document.querySelectorAll('.myImg').forEach(e => e.remove());
        for(const SIZE of SIZES) {
            resizeImageToSpecificWidth(SIZE);
        }
    };

    const getImageTag = (width) => {
        const IMG = document.createElement('img');
        IMG.id = `img-${width}`;
        IMG.className = "myImg";
        document.getElementById("images").appendChild(IMG)
        return IMG;
    }

    const resizeImageToSpecificWidth = (width) => {
        const IMG = getImageTag(width);
        if (input.files && input.files[0]) {
            const reader = new FileReader();

            reader.onload = (event) => {
                const img = new Image();
                img.onload = () => {
                    // if (img.width > width) {
                    const oc = document.createElement('canvas'), octx = oc.getContext('2d');
                    oc.width = img.width;
                    oc.height = img.height;
                    octx.drawImage(img, 0, 0);
                    while (oc.width * 0.5 > width) {
                        oc.width *= 0.5;
                        oc.height *= 0.5;
                        octx.drawImage(oc, 0, 0, oc.width, oc.height);
                    }
                    oc.width = width;
                    oc.height = oc.width * img.height / img.width;
                    octx.drawImage(img, 0, 0, oc.width, oc.height);
                    const DATA =  oc.toDataURL();
                    IMG.src = DATA;
                };
                document.getElementById('original-image').src = event.target.result;
                img.src = event.target.result;
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    const zipIt = async () => {
        const zip = new JSZip();
        for(const IMG of document.getElementsByClassName("myImg")) {
            const INDEX = IMG.src.indexOf('base64,') + 'base64,'.length; // or = 28 if you're sure about the prefix
            const CONTENT = IMG.src.substring(INDEX);
            zip.file(`${IMG.id}.png`, CONTENT, {base64: true});
        }

        try {
            const BLOB = await zip.generateAsync({type:"blob"})
            saveAs(BLOB, "icons.zip");
        } catch (e) {
            alert(e)
        }

    }

</script>
</body>
</html>
	<html>
	<body>
	<input type="file" class="choose" value=""><br/>

	<img id="original-image" width="300px"><br/><br>

	<div id="images">

	</div>

	<div id="download" onclick="zipIt()">DOWNLOAD</div>

	32.png, 72.png, 512.png

	<style>
	#images {
	background: #ccc;
	width: 96vw;
	height: 540px;
	padding-top: 10px;
	}
	html, body {
	margin: 1vw;
	}

	#original-image {
	display: none;
	}

	.choose::-webkit-file-upload-button {
	color: white;
	display: inline-block;
	background: #1CB6E0;
	border: none;
	padding: 7px 15px;
	font-weight: 700;
	border-radius: 3px;
	white-space: nowrap;
	cursor: pointer;
	font-size: 10pt;
	}

	</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity="sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"
	integrity="sha512-XMVd28F1oH/O71fzwBnV7HucLxVwtxf26XV8P4wPk26EDxuGZ91N8bsOttmnomcCD3CS5ZMRL50H0GgOHvegtg=="
	crossorigin="anonymous" referrerpolicy="no-referrer"></script>

	<script>

	const input = document.getElementsByTagName('input')[0];
	const SIZES = [32, 72, 128, 512];

	input.onclick = function () {
	this.value = null;
	};

	input.onchange = function () {
	document.querySelectorAll('.myImg').forEach(e => e.remove());
	for(const SIZE of SIZES) {
	resizeImageToSpecificWidth(SIZE);
	}
	};

	const getImageTag = (width) => {
	const IMG = document.createElement('img');
	IMG.id = `img-${width}`;
	IMG.className = "myImg";
	document.getElementById("images").appendChild(IMG)
	return IMG;
	}

	const resizeImageToSpecificWidth = (width) => {
	const IMG = getImageTag(width);
	if (input.files && input.files[0]) {
	const reader = new FileReader();

	reader.onload = (event) => {
	const img = new Image();
	img.onload = () => {
	// if (img.width > width) {
	const oc = document.createElement('canvas'), octx = oc.getContext('2d');
	oc.width = img.width;
	oc.height = img.height;
	octx.drawImage(img, 0, 0);
	while (oc.width * 0.5 > width) {
	oc.width *= 0.5;
	oc.height *= 0.5;
	octx.drawImage(oc, 0, 0, oc.width, oc.height);
	}
	oc.width = width;
	oc.height = oc.width * img.height / img.width;
	octx.drawImage(img, 0, 0, oc.width, oc.height);
	const DATA = oc.toDataURL();
	IMG.src = DATA;
	};
	document.getElementById('original-image').src = event.target.result;
	img.src = event.target.result;
	};
	reader.readAsDataURL(input.files[0]);
	}
	}

	const zipIt = async () => {
	const zip = new JSZip();
	for(const IMG of document.getElementsByClassName("myImg")) {
	const INDEX = IMG.src.indexOf('base64,') + 'base64,'.length; // or = 28 if you're sure about the prefix
	const CONTENT = IMG.src.substring(INDEX);
	zip.file(`${IMG.id}.png`, CONTENT, {base64: true});
	}

	try {
	const BLOB = await zip.generateAsync({type:"blob"})
	saveAs(BLOB, "icons.zip");
	} catch (e) {
	alert(e)
	}

	}

	</script>
	</body>
	</html>