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