Mercurial Hosting > linkmystyle

comparison 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
comparison
equal deleted inserted replaced
-1:000000000000 0:8f4df159f06b
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <style>
6 @import "croppr.css";
7
8 dialog[croppr] img {
9 width: 200px;
10 }
11 canvas[result] {
12 width: 200px;
13 }
14 </style>
15 <script src="croppr.js"></script>
16 <script src="/uploadcare/uploadcare.js"></script>
17 <script>
18 let croppr;
19 function start() {
20 let dialog = document.querySelector('dialog');
21 dialog.showModal();
22 let img = dialog.querySelector('img');
23 //img.src = 'https://ucarecdn.com/ede0040a-b577-4c2e-aeaf-b7f557ba2747/-/quality/smart/';
24 croppr = new Croppr(img, {
25 aspectRatio: 1,
26 });
27 }
28 function cancelCrop() {
29 document.querySelector('dialog[open]').close();
30 croppr.destroy();
31 }
32 function crop() {
33 let value = croppr.getValue();
34 console.log(value);
35 let width = value.width;
36 let height = value.height;
37 croppr.destroy();
38 let dialog = document.querySelector('dialog[croppr]');
39 let imgCroppr = dialog.querySelector('img');
40 console.log(imgCroppr);
41 //let canvas = document.createElement('canvas');
42 let canvas = document.querySelector('canvas[result]');
43 canvas.width = width;
44 canvas.height = height;
45 let ctx = canvas.getContext('2d');
46 ctx.drawImage(imgCroppr, value.x, value.y, width, height, 0, 0, width, height);
47 //let imgResult = document.querySelector('img[result]');
48 //imgResult.url = canvas.toDataURL();
49 dialog.close();
50 }
51 async function loaded(input) {
52 let info = { file: input.files[0] };
53 await uploadcare.infoAddUrl(info);
54 let img = document.querySelector('dialog[croppr] img');
55 img.src = info.url;
56 start();
57 }
58 </script>
59 </head>
60 <body>
61 <p><input type=file onchange="loaded(this)"></p>
62 <dialog croppr>
63 <p><img></p>
64 <p>
65 <button onclick="crop()">crop</button>
66 <button onclick="cancelCrop()">cancel</button>
67 </p>
68 </dialog>
69 <p>result</p>
70 <p><canvas result></canvas></p>
71 <p>bottom</p>
72 </body>
73 </html>