Mercurial Hosting > linkmystyle
comparison src/uploadcare/croppr2.html @ 0:8f4df159f06b
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> |