Mercurial Hosting > linkmystyle

comparison 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
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 xdialog[croppr] {
9 height: 200px;
10 }
11 xdialog[croppr] div[img] {
12 height: 400px;
13 max-height: 80vh;
14 }
15 dialog[croppr] img {
16 xwidth: 200px;
17 xheight: 100%;
18 height: 400px;
19 max-height: calc(90vh - 110px);
20 display: block;
21 }
22 dialog[croppr] div[buttons] {
23 margin: 8px;
24 }
25 canvas[result] {
26 width: 200px;
27 }
28 </style>
29 <script src="croppr.js"></script>
30 <script>
31 let croppr;
32 function start() {
33 let dialog = document.querySelector('dialog');
34 dialog.showModal();
35 let img = dialog.querySelector('img');
36 //img.src = 'https://ucarecdn.com/ede0040a-b577-4c2e-aeaf-b7f557ba2747/-/quality/smart/';
37 croppr = new Croppr(img, {
38 aspectRatio: 1,
39 //startSize: [100, 100, '%'],
40 });
41 }
42 function cancelCrop() {
43 document.querySelector('dialog[open]').close();
44 }
45 function crop() {
46 let value = croppr.getValue();
47 console.log(value);
48 let width = value.width;
49 let height = value.height;
50 croppr.destroy();
51 let dialog = document.querySelector('dialog');
52 let imgCroppr = dialog.querySelector('img[croppr]');
53 console.log(imgCroppr);
54 //let canvas = document.createElement('canvas');
55 let canvas = document.querySelector('canvas[result]');
56 canvas.width = width;
57 canvas.height = height;
58 let ctx = canvas.getContext('2d');
59 ctx.drawImage(imgCroppr, value.x, value.y, width, height, 0, 0, width, height);
60 //let imgResult = document.querySelector('img[result]');
61 //imgResult.url = canvas.toDataURL();
62 dialog.close();
63 }
64 </script>
65 </head>
66 <body>
67 <p>top</p>
68 <p><button onclick="start()">start</button>
69 <dialog croppr onclose="croppr.destroy()">
70 <div img><img croppr src="https://ucarecdn.com/ede0040a-b577-4c2e-aeaf-b7f557ba2747/-/quality/smart/"></div>
71 <div buttons>
72 <button onclick="crop()">crop</button>
73 <button onclick="cancelCrop()">cancel</button>
74 </div>
75 </dialog>
76 <p>result</p>
77 <p><canvas result></canvas></p>
78 <p><img crossorigin="anonymous" result></p>
79 <p>bottom</p>
80 </body>
81 </html>