|
0
|
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>
|
