Mercurial Hosting > linkmystyle

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

			xdialog[croppr] {
				height: 200px;
			}
			xdialog[croppr] div[img] {
				height: 400px;
				max-height: 80vh;
			}
			dialog[croppr] img {
				xwidth: 200px;
				xheight: 100%;
				height: 400px;
				max-height: calc(90vh - 110px);
				display: block;
			}
			dialog[croppr] div[buttons] {
				margin: 8px;
			}
			canvas[result] {
				width: 200px;
			}
		</style>
		<script src="croppr.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,
					//startSize: [100, 100, '%'],
				});
			}
			function cancelCrop() {
				document.querySelector('dialog[open]').close();
			}
			function crop() {
				let value = croppr.getValue();
				console.log(value);
				let width = value.width;
				let height = value.height;
				croppr.destroy();
				let dialog = document.querySelector('dialog');
				let imgCroppr = dialog.querySelector('img[croppr]');
				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();
			}
		</script>
	</head>
	<body>
		<p>top</p>
		<p><button onclick="start()">start</button>
		<dialog croppr onclose="croppr.destroy()">
			<div img><img croppr src="https://ucarecdn.com/ede0040a-b577-4c2e-aeaf-b7f557ba2747/-/quality/smart/"></div>
			<div buttons>
				<button onclick="crop()">crop</button>
				<button onclick="cancelCrop()">cancel</button>
			</div>
		</dialog>
		<p>result</p>
		<p><canvas result></canvas></p>
		<p><img crossorigin="anonymous" result></p>
		<p>bottom</p>
	</body>
</html>
author	Franklin Schmidt <fschmidt@gmail.com>
date	Fri, 11 Jul 2025 21:17:19 -0600
parents	8f4df159f06b
children