Mercurial Hosting > linkmystyle

<!doctype html>
<html lang="en">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			@import "/uploadcare/croppr.css";
			@import "/uploadcare/uploadcare.css";

			img {
				width: 50%;
			}
		</style>
		<script src="/uploadcare/croppr.js"></script>
		<script src="/uploadcare/uploadcare.js"></script>
		<script>
			'use strict';

			uploadcare.maxFileSize = 1000000;
			uploadcare.cropprOptions = {};

			async function loaded(input) {
				let info = { file: input.files[0] };
				input.value = null;
				await uploadcare.infoCompress(info);
				console.log(info);
				if( info.canceled )
					return;
				document.querySelector('span[original]').textContent = info.file.size;
				document.querySelector('p[compressed]').textContent = 'compressed: ' + info.compressedName + ' ' + info.compressed.size;
				await uploadcare.infoAddUrl(info);
				document.querySelector('img[original]').src = info.url;
				let info2 = { file: info.compressed };
				await uploadcare.infoAddUrl(info2);
				document.querySelector('img[compressed]').src = info2.url;
			}
		</script>
	</head>
	<body>
		<p><input type=file accept="image/*" onchange="loaded(this)"> <span original></span></p>
		<p compressed></p>
		<p>left is original, right is compressed</p>
		<p><img original><img compressed></p>
	</body>
</html>
author	Franklin Schmidt <fschmidt@gmail.com>
date	Sat, 12 Jul 2025 12:51:36 -0600
parents	8f4df159f06b
children