Mercurial Hosting > linkmystyle

diff src/uploadcare/croppr2.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/croppr2.html	Fri Jul 11 20:57:49 2025 -0600
@@ -0,0 +1,73 @@
+<!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>