msvamp/imageResize.php

## imageResize.php
<?php
header('content-type: text/plain', true);
ini_set('display_errors', 0);
ini_set('log_errors', 1);
ini_set('error_log', 'error.log');

$osiz = getimagesize($_FILES['img']["tmp_name"] ?? __FILE__);
if (!$osiz || !ctype_digit(strval($_POST['pix'] ?? "a")) || !in_array($_POST['type'] ?? 0, [1, 2, 3])) {
	http_response_code(400);
	exit("Unsupported or missing input");
}

$oimg = imagecreatefromstring(file_get_contents($_FILES['img']["tmp_name"] ?? __FILE__));
if (!$oimg) {
	http_response_code(400);
	exit("Unsupported image file");
}

$osiz = [$osiz[0], $osiz[1]];
$maxr = max($osiz) / $_POST['pix'];
$nsiz = [floor($osiz[0] / $maxr), floor($osiz[1] / $maxr)];

$nimg = imagecreate(...$nsiz);
imagepalettetotruecolor($nimg);
imageAlphaBlending($nimg, false);
imageSaveAlpha($nimg, true);
imagecopyresampled($nimg, $oimg, 0, 0, 0, 0, $nsiz[0], $nsiz[1], $osiz[0], $osiz[1]);

switch (intval($_POST['type'])) {
	case 1:
		header('content-type: image/png');
		imagepng($nimg, null, 9, PNG_ALL_FILTERS);
		break;
	case 2:
		header('content-type: image/jpeg');
		imagejpeg($nimg, null, 80);
		break;
	case 3:
		header('content-type: image/webp');
		imagewebp($nimg, null, 80);
		break;
}

imagedestroy($oimg);
imagedestroy($nimg);

## index.html
<html>
	<head>
		<title>Resize Image</title>
		<style>
			@import "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css";
			body {
				text-align: center;
			}
			.card {
				display: inline-flex;
				width: 90%;
				margin-bottom: 1rem !important;
			}
			.imgPreview {
				display: inline-block;
				background-color: #444;
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				color: #fff;
				line-height: 300px;
				height: 300px;
				width: 100%;
				max-width: 500px;
				margin-bottom: 1rem !important;
			}
			p {
				font-weight: bold;
			}
			p * {
				font-weight: initial;
			}
		</style>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
	</head>
	<body class="mt-5 pt-5">
		<nav class="navbar navbar-dark fixed-top bg-primary container-fluid">
			<span class="navbar-brand navbar-text mb-0 h1">Image Resizer</span>
		</nav>
		<div class="card">
			<form class="card-body" id="main" enctype="multipart/form-data">
				<p>
					Select image file:
					<input required name="img" type="file" accept="image/jpeg, image/png, image/webp" />
				</p>
				<div class="imgPreview" id="imgSel">Selected image will appear here</div>
				<p>
					Select output type:
					<br />
					<input type="radio" name="type" value="1" />
					<span>PNG</span>
					<input required type="radio" name="type" value="2" />
					<span>JPG</span>
					<input type="radio" name="type" value="3" />
					<span>WEBP</span>
				</p>
				<p>
					Enter target dimension in pixels:
					<input required type="number" class="form-control" name="pix" placeholder="0" min="1" max="9999" />
				</p>
				<p class="mt-4">
					<input type="submit" value="Resize image" class="btn btn-success" />
					<input type="reset" value="Reset image" class="btn btn-danger" />
				</p>
			</form>
		</div>
		<script src="script.js"></script>
	</body>
</html>

## script.js
var nav = document.getElementsByTagName("nav")[0]
var frm = document.getElementById("main")
var ipr = document.getElementById("imgSel")

frm.onsubmit = function (e) {
	e.preventDefault()
	Array(...frm.elements).forEach(function (i) {
		i.disabled = i.classList.contains("btn")
	})
	var x = new XMLHttpRequest()
	var f = new FormData(frm)
	x.open("POST", "imageResize.php")
	x.responseType = "arraybuffer"
	x.onloadend = function () {
		Array(...frm.elements).forEach(function (i) {
			i.disabled = false
		})
		frm.reset()

		var w = new Date()
		var c = document.createElement("div")
		var b = document.createElement("div")
		var t = document.createElement("h5")
		c.classList.add("card")
		c.setAttribute("id", "resize-" + w.getTime())
		b.classList.add("card-body")
		t.classList.add("card-title")
		t.innerText = "Resized image: " + w.toLocaleString()
		b.appendChild(t)

		if (this.status !== 200) {
			b.style.color = "#f00"
			b.appendChild(document.createTextNode(String.fromCharCode.apply(null, new Uint8Array(this.response))))
		} else {
			var u = URL.createObjectURL(new Blob([this.response], { type: this.getResponseHeader("content-type") }))
			var i = document.createElement("div")
			i.classList.add("imgPreview")
			i.style.backgroundImage = "url(" + u + ")"

			var a1 = document.createElement("a")
			a1.href = u
			a1.setAttribute("download", "")
			a1.classList.add("btn", "btn-primary")
			a1.innerText = "Download"

			var a2 = document.createElement("button")
			a2.setAttribute("data-url", u)
			a2.setAttribute("data-tar", w.getTime())
			a2.onclick = function (e) {
				URL.revokeObjectURL(e.target.getAttribute("data-url"))
				document.getElementById("resize-" + e.target.getAttribute("data-tar")).remove()
			}
			a2.classList.add("btn", "btn-danger")
			a2.innerText = "Delete"

			b.appendChild(i)
			var p = document.createElement("p")
			p.appendChild(a1)
			p.innerHTML += " "
			p.appendChild(a2)
			b.appendChild(p)
		}

		c.appendChild(b)
		nav.parentNode.insertBefore(c, nav.nextSibling)
	}
	x.send(f)
}

frm.onreset = frm.elements["img"].onchange = function (e) {
	if (!e.target.files || !e.target.files.length) {
		ipr.style.color = null
		ipr.style.backgroundImage = null
	} else {
		ipr.style.color = "transparent"
		ipr.style.backgroundImage = "url(" + URL.createObjectURL(e.target.files[0]) + ")"
	}
}
	<?php
	header('content-type: text/plain', true);
	ini_set('display_errors', 0);
	ini_set('log_errors', 1);
	ini_set('error_log', 'error.log');

	$osiz = getimagesize($_FILES['img']["tmp_name"] ?? __FILE__);
	if (!$osiz \|\| !ctype_digit(strval($_POST['pix'] ?? "a")) \|\| !in_array($_POST['type'] ?? 0, [1, 2, 3])) {
	http_response_code(400);
	exit("Unsupported or missing input");
	}

	$oimg = imagecreatefromstring(file_get_contents($_FILES['img']["tmp_name"] ?? __FILE__));
	if (!$oimg) {
	http_response_code(400);
	exit("Unsupported image file");
	}

	$osiz = [$osiz[0], $osiz[1]];
	$maxr = max($osiz) / $_POST['pix'];
	$nsiz = [floor($osiz[0] / $maxr), floor($osiz[1] / $maxr)];

	$nimg = imagecreate(...$nsiz);
	imagepalettetotruecolor($nimg);
	imageAlphaBlending($nimg, false);
	imageSaveAlpha($nimg, true);
	imagecopyresampled($nimg, $oimg, 0, 0, 0, 0, $nsiz[0], $nsiz[1], $osiz[0], $osiz[1]);

	switch (intval($_POST['type'])) {
	case 1:
	header('content-type: image/png');
	imagepng($nimg, null, 9, PNG_ALL_FILTERS);
	break;
	case 2:
	header('content-type: image/jpeg');
	imagejpeg($nimg, null, 80);
	break;
	case 3:
	header('content-type: image/webp');
	imagewebp($nimg, null, 80);
	break;
	}

	imagedestroy($oimg);
	imagedestroy($nimg);
	<html>
	<head>
	<title>Resize Image</title>
	<style>
	@import "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css";
	body {
	text-align: center;
	}
	.card {
	display: inline-flex;
	width: 90%;
	margin-bottom: 1rem !important;
	}
	.imgPreview {
	display: inline-block;
	background-color: #444;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	color: #fff;
	line-height: 300px;
	height: 300px;
	width: 100%;
	max-width: 500px;
	margin-bottom: 1rem !important;
	}
	p {
	font-weight: bold;
	}
	p * {
	font-weight: initial;
	}
	</style>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
	</head>
	<body class="mt-5 pt-5">
	<nav class="navbar navbar-dark fixed-top bg-primary container-fluid">
	<span class="navbar-brand navbar-text mb-0 h1">Image Resizer</span>
	</nav>
	<div class="card">
	<form class="card-body" id="main" enctype="multipart/form-data">
	<p>
	Select image file:
	<input required name="img" type="file" accept="image/jpeg, image/png, image/webp" />
	</p>
	<div class="imgPreview" id="imgSel">Selected image will appear here</div>
	<p>
	Select output type:
	<br />
	<input type="radio" name="type" value="1" />
	<span>PNG</span>
	<input required type="radio" name="type" value="2" />
	<span>JPG</span>
	<input type="radio" name="type" value="3" />
	<span>WEBP</span>
	</p>
	<p>
	Enter target dimension in pixels:
	<input required type="number" class="form-control" name="pix" placeholder="0" min="1" max="9999" />
	</p>
	<p class="mt-4">
	<input type="submit" value="Resize image" class="btn btn-success" />
	<input type="reset" value="Reset image" class="btn btn-danger" />
	</p>
	</form>
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	var nav = document.getElementsByTagName("nav")[0]
	var frm = document.getElementById("main")
	var ipr = document.getElementById("imgSel")

	frm.onsubmit = function (e) {
	e.preventDefault()
	Array(...frm.elements).forEach(function (i) {
	i.disabled = i.classList.contains("btn")
	})
	var x = new XMLHttpRequest()
	var f = new FormData(frm)
	x.open("POST", "imageResize.php")
	x.responseType = "arraybuffer"
	x.onloadend = function () {
	Array(...frm.elements).forEach(function (i) {
	i.disabled = false
	})
	frm.reset()

	var w = new Date()
	var c = document.createElement("div")
	var b = document.createElement("div")
	var t = document.createElement("h5")
	c.classList.add("card")
	c.setAttribute("id", "resize-" + w.getTime())
	b.classList.add("card-body")
	t.classList.add("card-title")
	t.innerText = "Resized image: " + w.toLocaleString()
	b.appendChild(t)

	if (this.status !== 200) {
	b.style.color = "#f00"
	b.appendChild(document.createTextNode(String.fromCharCode.apply(null, new Uint8Array(this.response))))
	} else {
	var u = URL.createObjectURL(new Blob([this.response], { type: this.getResponseHeader("content-type") }))
	var i = document.createElement("div")
	i.classList.add("imgPreview")
	i.style.backgroundImage = "url(" + u + ")"

	var a1 = document.createElement("a")
	a1.href = u
	a1.setAttribute("download", "")
	a1.classList.add("btn", "btn-primary")
	a1.innerText = "Download"

	var a2 = document.createElement("button")
	a2.setAttribute("data-url", u)
	a2.setAttribute("data-tar", w.getTime())
	a2.onclick = function (e) {
	URL.revokeObjectURL(e.target.getAttribute("data-url"))
	document.getElementById("resize-" + e.target.getAttribute("data-tar")).remove()
	}
	a2.classList.add("btn", "btn-danger")
	a2.innerText = "Delete"

	b.appendChild(i)
	var p = document.createElement("p")
	p.appendChild(a1)
	p.innerHTML += " "
	p.appendChild(a2)
	b.appendChild(p)
	}

	c.appendChild(b)
	nav.parentNode.insertBefore(c, nav.nextSibling)
	}
	x.send(f)
	}

	frm.onreset = frm.elements["img"].onchange = function (e) {
	if (!e.target.files \|\| !e.target.files.length) {
	ipr.style.color = null
	ipr.style.backgroundImage = null
	} else {
	ipr.style.color = "transparent"
	ipr.style.backgroundImage = "url(" + URL.createObjectURL(e.target.files[0]) + ")"
	}
	}