Mercurial Hosting > linkmystyle

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

			dialog[croppr] img {
				width: 200px;
			}
			canvas[result] {
				width: 200px;
			}
		</style>
		<script src="croppr.js"></script>
		<script src="/uploadcare/uploadcare.js"></script>
		<script>
			let croppr;
			function start() {
				let dialog = document.querySelector('dialog');
				dialog.showModal();
				let img = dialog.querySelector('img');
				//img.src = 'https://ucarecdn.com/ede0040a-b577-4c2e-aeaf-b7f557ba2747/-/quality/smart/';
				croppr = new Croppr(img, {
					aspectRatio: 1,
				});
			}
			function cancelCrop() {
				document.querySelector('dialog[open]').close();
				croppr.destroy();
			}
			function crop() {
				let value = croppr.getValue();
				console.log(value);
				let width = value.width;
				let height = value.height;
				croppr.destroy();
				let dialog = document.querySelector('dialog[croppr]');
				let imgCroppr = dialog.querySelector('img');
				console.log(imgCroppr);
				//let canvas = document.createElement('canvas');
				let canvas = document.querySelector('canvas[result]');
				canvas.width = width;
				canvas.height = height;
				let ctx = canvas.getContext('2d');
				ctx.drawImage(imgCroppr, value.x, value.y, width, height, 0, 0, width, height);
				//let imgResult = document.querySelector('img[result]');
				//imgResult.url = canvas.toDataURL();
				dialog.close();
			}
			async function loaded(input) {
				let info = { file: input.files[0] };
				await uploadcare.infoAddUrl(info);
				let img = document.querySelector('dialog[croppr] img');
				img.src = info.url;
				start();
			}
		</script>
	</head>
	<body>
		<p><input type=file onchange="loaded(this)"></p>
		<dialog croppr>
			<p><img></p>
			<p>
				<button onclick="crop()">crop</button>
				<button onclick="cancelCrop()">cancel</button>
			</p>
		</dialog>
		<p>result</p>
		<p><canvas result></canvas></p>
		<p>bottom</p>
	</body>
</html>
author	Franklin Schmidt <fschmidt@gmail.com>
date	Sat, 12 Jul 2025 12:51:36 -0600
parents	8f4df159f06b
children