Mercurial Hosting > linkmystyle

diff src/uploadcare/croppr.html @ 0:8f4df159f06b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start public repo
author Franklin Schmidt <fschmidt@gmail.com>
date Fri, 11 Jul 2025 20:57:49 -0600
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/uploadcare/croppr.html	Fri Jul 11 20:57:49 2025 -0600
@@ -0,0 +1,81 @@
+<!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>