-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
558 lines (520 loc) · 64.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
<!DOCTYPE html><html lang="en-us"><head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes"/>
<meta name="robots" content="index, follow"/>
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1"/>
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1"/>
<meta name="docsearch:language" content="en"/>
<meta name="docsearch:version" content="master"/>
<meta name="google-site-verification" content="x2SFbVPxbn1Gk2wv-POqGp4oAlzFZV7FLIXDzrOCvlY"/>
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<base href="/"/>
<link href="manifest.json" rel="manifest"/>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"/>
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ff5c9b"/>
<meta name="msapplication-TileColor" content="#110e2d"/>
<meta name="theme-color" content="#ffffff"/>
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet"/>
<link href="_content/Cropper.Blazor/cropper.min.css" rel="stylesheet"/>
<link href="Cropper.Blazor.Client.styles.css" rel="stylesheet"/>
<link href="Cropper.Blazor.Client.min.css" rel="stylesheet"/>
<!-- %%-PRERENDERING-HEADOUTLET-BEGIN-%% -->
<title>Cropper Blazor component for cropping images</title><meta name="keywords" content="Cropper.Blazor, Blazor.Cropper, cropper, blazor, component, crop-image, cropperjs, Cropper.js, Blazor Components, Blazor Library, Blazor Cropper, Cropper, Image, Crop, Resize, image-cropper, crop-image, csharp, blazor-cropper, .net, .net core, pwa, webassembly, blazor image editor, image editor, blazor image, free image cropper, online cropper, photo cropper, avatar cropper, photo cropper, image cropper, resize image, photo resizer, blazor online cropper, blazor free image cropper, blazor photo cropper, blazor avatar cropper, blazor photo cropper, blazor image cropper, blazor resize image, blazor photo resizer, home, installation" />
<meta property="og:title" content="Cropper Blazor component for cropping images" />
<meta name="twitter:title" content="Cropper Blazor component for cropping images" />
<meta name="twitter:card" content="Cropper Blazor component for cropping images" />
<meta name="twitter:image" content="https://cropperblazor.github.io/cropperblazor.png">
<meta property="og:url" content="https://cropperblazor.github.io/">
<meta property="og:site_name" content="Cropper.Blazor">
<meta property="og:image" content="https://cropperblazor.github.io/cropperblazor.png">
<meta property="og:type" content="website"><meta name="twitter:description" content="Getting started with Cropper.Blazor for faster and easier web development." />
<meta name="description" content="Getting started with Cropper.Blazor for faster and easier web development." />
<meta property="og:description" content="Getting started with Cropper.Blazor for faster and easier web development." />
<!-- %%-PRERENDERING-HEADOUTLET-END-%% -->
</head>
<body>
<div id="app">
<div class="master-loader">
<div class="logo-loader-wrapper">
<div class="loader-box">
<img src="logo.svg" class="loader-image"/>
<img src="logo.svg" class="loader-image"/>
<div class="loader-text text-gradient"></div>
</div>
</div>
</div>
<!-- %%-PRERENDERING-BEGIN-%% -->
<div style="opacity: 0; position: fixed; z-index: -1; top: 0; left: 0; bottom: 0; right: 0;">
<style>
::-webkit-scrollbar {width: 8px;height: 8px;z-index: 1;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {background: #c4c4c4;border-radius: 1px;}
::-webkit-scrollbar-thumb:hover {background: #a6a6a6;}
html, body * {scrollbar-color: #c4c4c4 transparent;scrollbar-width: thin;}
</style>
<style>
.mud-chart-serie:hover {
filter: url(#lighten);
}
</style>
<style>
:root{
--mud-palette-black: rgba(39,44,52,1);
--mud-palette-white: rgba(255,255,255,1);
--mud-palette-primary: rgba(0,157,234,1);
--mud-palette-primary-rgb: 0,157,234;
--mud-palette-primary-text: rgba(255,255,255,1);
--mud-palette-primary-darken: rgb(0,129,194);
--mud-palette-primary-lighten: rgb(20,177,255);
--mud-palette-primary-hover: rgba(0,157,234,0.058823529411764705);
--mud-palette-secondary: rgba(231,60,126,1);
--mud-palette-secondary-rgb: 231,60,126;
--mud-palette-secondary-text: rgba(255,255,255,1);
--mud-palette-secondary-darken: rgb(222,27,102);
--mud-palette-secondary-lighten: rgb(235,92,146);
--mud-palette-secondary-hover: rgba(231,60,126,0.058823529411764705);
--mud-palette-tertiary: rgba(30,200,165,1);
--mud-palette-tertiary-rgb: 30,200,165;
--mud-palette-tertiary-text: rgba(255,255,255,1);
--mud-palette-tertiary-darken: rgb(25,169,140);
--mud-palette-tertiary-lighten: rgb(42,223,187);
--mud-palette-tertiary-hover: rgba(30,200,165,0.058823529411764705);
--mud-palette-info: rgba(33,150,243,1);
--mud-palette-info-rgb: 33,150,243;
--mud-palette-info-text: rgba(255,255,255,1);
--mud-palette-info-darken: rgb(12,128,223);
--mud-palette-info-lighten: rgb(71,167,245);
--mud-palette-info-hover: rgba(33,150,243,0.058823529411764705);
--mud-palette-success: rgba(0,200,83,1);
--mud-palette-success-rgb: 0,200,83;
--mud-palette-success-text: rgba(255,255,255,1);
--mud-palette-success-darken: rgb(0,163,68);
--mud-palette-success-lighten: rgb(0,235,98);
--mud-palette-success-hover: rgba(0,200,83,0.058823529411764705);
--mud-palette-warning: rgba(255,152,0,1);
--mud-palette-warning-rgb: 255,152,0;
--mud-palette-warning-text: rgba(255,255,255,1);
--mud-palette-warning-darken: rgb(214,129,0);
--mud-palette-warning-lighten: rgb(255,167,36);
--mud-palette-warning-hover: rgba(255,152,0,0.058823529411764705);
--mud-palette-error: rgba(244,67,54,1);
--mud-palette-error-rgb: 244,67,54;
--mud-palette-error-text: rgba(255,255,255,1);
--mud-palette-error-darken: rgb(242,28,13);
--mud-palette-error-lighten: rgb(246,96,85);
--mud-palette-error-hover: rgba(244,67,54,0.058823529411764705);
--mud-palette-dark: rgba(17,14,45,1);
--mud-palette-dark-rgb: 17,14,45;
--mud-palette-dark-text: rgba(255,255,255,1);
--mud-palette-dark-darken: rgb(6,5,16);
--mud-palette-dark-lighten: rgb(26,22,67);
--mud-palette-dark-hover: rgba(17,14,45,0.058823529411764705);
--mud-palette-text-primary: rgba(66,66,66,1);
--mud-palette-text-secondary: rgba(66,84,102,1);
--mud-palette-text-disabled: rgba(0,0,0,0.3764705882352941);
--mud-palette-action-default: rgba(0,0,0,0.5372549019607843);
--mud-palette-action-default-hover: rgba(0,0,0,0.058823529411764705);
--mud-palette-action-disabled: rgba(0,0,0,0.25882352941176473);
--mud-palette-action-disabled-background: rgba(0,0,0,0.11764705882352941);
--mud-palette-surface: rgba(255,255,255,1);
--mud-palette-background: rgba(255,255,255,1);
--mud-palette-background-gray: rgba(249,250,252,1);
--mud-palette-drawer-background: rgba(255,255,255,1);
--mud-palette-drawer-text: rgba(66,66,66,1);
--mud-palette-drawer-icon: rgba(97,97,97,1);
--mud-palette-appbar-background: rgba(255,255,255,0.8);
--mud-palette-appbar-text: rgba(66,66,66,1);
--mud-palette-lines-default: rgba(0,0,0,0.11764705882352941);
--mud-palette-lines-inputs: rgba(189,189,189,1);
--mud-palette-table-lines: rgba(224,224,224,1);
--mud-palette-table-striped: rgba(0,0,0,0.0196078431372549);
--mud-palette-table-hover: rgba(0,0,0,0.0392156862745098);
--mud-palette-divider: rgba(224,224,224,1);
--mud-palette-divider-light: rgba(0,0,0,0.8);
--mud-palette-gray-default: #4B5563;
--mud-palette-gray-light: #e8e8e8;
--mud-palette-gray-lighter: #f9f9f9;
--mud-palette-gray-dark: #757575;
--mud-palette-gray-darker: #616161;
--mud-palette-overlay-dark: rgba(33,33,33,0.4980392156862745);
--mud-palette-overlay-light: rgba(255,255,255,0.4980392156862745);
--mud-ripple-color: var(--mud-palette-text-primary);
--mud-ripple-opacity: 0.1;
--mud-ripple-opacity-secondary: 0.2;
--mud-elevation-0: none;
--mud-elevation-1: 0 2px 4px -1px rgba(6, 24, 44, 0.2);
--mud-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
--mud-elevation-3: 0 30px 60px rgba(0,0,0,0.12);
--mud-elevation-4: 0 6px 12px -2px rgba(50,50,93,0.25),0 3px 7px -3px rgba(0,0,0,0.3);
--mud-elevation-5: 0 50px 100px -20px rgba(50,50,93,0.25),0 30px 60px -30px rgba(0,0,0,0.3);
--mud-elevation-6: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
--mud-elevation-7: 0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12);
--mud-elevation-8: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
--mud-elevation-9: 0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12);
--mud-elevation-10: 0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12);
--mud-elevation-11: 0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12);
--mud-elevation-12: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
--mud-elevation-13: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12);
--mud-elevation-14: 0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12);
--mud-elevation-15: 0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12);
--mud-elevation-16: 0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12);
--mud-elevation-17: 0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12);
--mud-elevation-18: 0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12);
--mud-elevation-19: 0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12);
--mud-elevation-20: 0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12);
--mud-elevation-21: 0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12);
--mud-elevation-22: 0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12);
--mud-elevation-23: 0 50px 100px -20px rgba(50, 50, 93, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.30);
--mud-elevation-24: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),12.5px 12.5px 10px rgba(0, 0, 0, 0.035),22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),100px 100px 80px rgba(0, 0, 0, 0.07);
--mud-elevation-25: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
--mud-default-borderradius: 6px;
--mud-drawer-width-left: 240px;
--mud-drawer-width-right: 240px;
--mud-drawer-width-mini-left: 56px;
--mud-drawer-width-mini-right: 56px;
--mud-appbar-height: 64px;
--mud-typography-default-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-default-size: .875rem;
--mud-typography-default-weight: 400;
--mud-typography-default-lineheight: 1.43;
--mud-typography-default-letterspacing: normal;
--mud-typography-default-text-transform: none;
--mud-typography-h1-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-h1-size: 4rem;
--mud-typography-h1-weight: 700;
--mud-typography-h1-lineheight: 1.167;
--mud-typography-h1-letterspacing: -.01562em;
--mud-typography-h1-text-transform: none;
--mud-typography-h2-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-h2-size: 3.75rem;
--mud-typography-h2-weight: 300;
--mud-typography-h2-lineheight: 1.2;
--mud-typography-h2-letterspacing: -.00833em;
--mud-typography-h2-text-transform: none;
--mud-typography-h3-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-h3-size: 3rem;
--mud-typography-h3-weight: 600;
--mud-typography-h3-lineheight: 1.8;
--mud-typography-h3-letterspacing: 0;
--mud-typography-h3-text-transform: none;
--mud-typography-h4-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-h4-size: 2.125rem;
--mud-typography-h4-weight: 700;
--mud-typography-h4-lineheight: 1.235;
--mud-typography-h4-letterspacing: .00735em;
--mud-typography-h4-text-transform: none;
--mud-typography-h5-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-h5-size: 1.8rem;
--mud-typography-h5-weight: 700;
--mud-typography-h5-lineheight: 2;
--mud-typography-h5-letterspacing: 0;
--mud-typography-h5-text-transform: none;
--mud-typography-h6-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-h6-size: 1.125rem;
--mud-typography-h6-weight: 700;
--mud-typography-h6-lineheight: 2;
--mud-typography-h6-letterspacing: .0075em;
--mud-typography-h6-text-transform: none;
--mud-typography-subtitle1-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-subtitle1-size: 1.1rem;
--mud-typography-subtitle1-weight: 500;
--mud-typography-subtitle1-lineheight: 1.75;
--mud-typography-subtitle1-letterspacing: .00938em;
--mud-typography-subtitle1-text-transform: none;
--mud-typography-subtitle2-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-subtitle2-size: 1rem;
--mud-typography-subtitle2-weight: 600;
--mud-typography-subtitle2-lineheight: 1.8;
--mud-typography-subtitle2-letterspacing: .00714em;
--mud-typography-subtitle2-text-transform: none;
--mud-typography-body1-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-body1-size: 1rem;
--mud-typography-body1-weight: 400;
--mud-typography-body1-lineheight: 1.5;
--mud-typography-body1-letterspacing: .00938em;
--mud-typography-body1-text-transform: none;
--mud-typography-body2-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-body2-size: .875rem;
--mud-typography-body2-weight: 400;
--mud-typography-body2-lineheight: 1.43;
--mud-typography-body2-letterspacing: .01071em;
--mud-typography-body2-text-transform: none;
--mud-typography-input-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-input-size: 1rem;
--mud-typography-input-weight: 400;
--mud-typography-input-lineheight: 1.1876;
--mud-typography-input-letterspacing: .00938em;
--mud-typography-input-text-transform: none;
--mud-typography-button-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-button-size: .875rem;
--mud-typography-button-weight: 500;
--mud-typography-button-lineheight: 1.75;
--mud-typography-button-letterspacing: .02857em;
--mud-typography-button-text-transform: none;
--mud-typography-caption-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-caption-size: .75rem;
--mud-typography-caption-weight: 400;
--mud-typography-caption-lineheight: 1.66;
--mud-typography-caption-letterspacing: .03333em;
--mud-typography-caption-text-transform: none;
--mud-typography-overline-family: 'Public Sans','Roboto','Arial','sans-serif';
--mud-typography-overline-size: .75rem;
--mud-typography-overline-weight: 400;
--mud-typography-overline-lineheight: 2.66;
--mud-typography-overline-letterspacing: .08333em;
--mud-typography-overline-text-transform: none;
--mud-zindex-drawer: 1100;
--mud-zindex-appbar: 1300;
--mud-zindex-dialog: 1400;
--mud-zindex-popover: 1200;
--mud-zindex-snackbar: 1500;
--mud-zindex-tooltip: 1600;
}
</style>
<div id="mud-snackbar-container" class="mud-snackbar-location-bottom-right"></div>
<div class="mud-popover-provider"><div id="popovercontent-6a10fe00-b937-4217-9295-bc5a2505b1c8" data-ticks="0" class="mud-popover mud-popover-top-left mud-popover-anchor-top-left mud-popover-overflow-flip-onopen mud-tooltip d-flex mud-tooltip-default mud-tooltip-bottom-center" style="transition-duration:1000ms;transition-delay:0ms;"></div></div>
<div class="mud-layout cropperblazor-landingpage" style=""><header class="mud-appbar mud-appbar-fixed-top mud-elevation-25 landing-appbar"><div role="toolbar" class="mud-toolbar mud-toolbar-gutters mud-toolbar-appbar">
</div></header>
<aside class="mud-drawer mud-drawer-fixed mud-drawer-pos-left mud-drawer--closed mud-drawer--initial mud-drawer-md mud-drawer-clipped-never mud-elevation-25 mud-drawer-temporary" style=""><div class="mud-drawer-content"><div role="toolbar" class="mud-toolbar mud-toolbar-gutters docs-gray-bg pa-2"><button type="button" class="mud-button-root mud-icon-button mud-inherit-text hover:mud-inherit-hover mud-ripple mud-ripple-icon" __internal_stopPropagation_onclick><span class="mud-icon-button-label"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/></svg></span></button>
<div aria-hidden="true" class="flex-grow-1"></div>
<div class="mud-tooltip-root mud-tooltip-inline"><button type="button" class="mud-button-root mud-icon-button mud-inherit-text hover:mud-inherit-hover mud-ripple mud-ripple-icon" __internal_stopPropagation_onclick><span class="mud-icon-button-label"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M19.03,3.56c-1.67-1.39-3.74-2.3-6.03-2.51v2.01c1.73,0.19,3.31,0.88,4.61,1.92L19.03,3.56z"/><path d="M11,3.06V1.05C8.71,1.25,6.64,2.17,4.97,3.56l1.42,1.42C7.69,3.94,9.27,3.25,11,3.06z"/><path d="M4.98,6.39L3.56,4.97C2.17,6.64,1.26,8.71,1.05,11h2.01C3.25,9.27,3.94,7.69,4.98,6.39z"/><path d="M20.94,11h2.01c-0.21-2.29-1.12-4.36-2.51-6.03l-1.42,1.42C20.06,7.69,20.75,9.27,20.94,11z"/><polygon points="7,12 10.44,13.56 12,17 13.56,13.56 17,12 13.56,10.44 12,7 10.44,10.44"/><path d="M12,21c-3.11,0-5.85-1.59-7.46-4H7v-2H1v6h2v-2.7c1.99,2.84,5.27,4.7,9,4.7c4.87,0,9-3.17,10.44-7.56l-1.96-0.45 C19.25,18.48,15.92,21,12,21z"/></g></g></svg></span></button><div id="popover-6a10fe00-b937-4217-9295-bc5a2505b1c8" class="mud-popover-cascading-value"></div></div></div>
<nav class="mud-navmenu mud-navmenu-primary mud-navmenu-margin-dense mud-navmenu-rounded pa-2"><div class="mud-nav-item"><a href="" rel="" tabindex="0" class="mud-nav-link mud-ripple active" aria-current="page"><svg class="mud-icon-root mud-icon-default mud-svg-icon mud-icon-size-medium mud-nav-link-icon mud-nav-link-icon-default" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><rect fill="none" height="24" width="24"/><path d="M14.59,7.41L18.17,11H6v2h12.17l-3.59,3.59L16,18l6-6l-6-6L14.59,7.41z M2,6v12h2V6H2z"/></svg><div class="mud-nav-link-text">Getting Started</div></a></div>
<div class="mud-nav-item"><a href="demo" rel="" tabindex="0" class="mud-nav-link mud-ripple"><svg class="mud-icon-root mud-icon-default mud-svg-icon mud-icon-size-medium mud-nav-link-icon mud-nav-link-icon-default" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 15h2V7c0-1.1-.9-2-2-2H9v2h8v8zM7 17V1H5v4H1v2h4v10c0 1.1.9 2 2 2h10v4h2v-4h4v-2H7z"/></svg><div class="mud-nav-link-text">Demo</div></a></div>
<div class="mud-nav-item"><a href="examples/cropperusage" rel="" tabindex="0" class="mud-nav-link mud-ripple"><svg class="mud-icon-root mud-icon-default mud-svg-icon mud-icon-size-medium mud-nav-link-icon mud-nav-link-icon-default" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 1l-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"/></svg><div class="mud-nav-link-text">Examples</div></a></div>
<div class="mud-nav-item"><a href="api" rel="" tabindex="0" class="mud-nav-link mud-ripple"><svg class="mud-icon-root mud-icon-default mud-svg-icon mud-icon-size-medium mud-nav-link-icon mud-nav-link-icon-default" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><g><rect fill="none" height="24" width="24"/><path d="M14,12l-2,2l-2-2l2-2L14,12z M12,6l2.12,2.12l2.5-2.5L12,1L7.38,5.62l2.5,2.5L12,6z M6,12l2.12-2.12l-2.5-2.5L1,12 l4.62,4.62l2.5-2.5L6,12z M18,12l-2.12,2.12l2.5,2.5L23,12l-4.62-4.62l-2.5,2.5L18,12z M12,18l-2.12-2.12l-2.5,2.5L12,23l4.62-4.62 l-2.5-2.5L12,18z"/></g></svg><div class="mud-nav-link-text">Api</div></a></div>
<div class="mud-nav-item"><a href="about" rel="" tabindex="0" class="mud-nav-link mud-ripple"><svg class="mud-icon-root mud-icon-default mud-svg-icon mud-icon-size-medium mud-nav-link-icon mud-nav-link-icon-default" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 8-11.5C20 5.81 16.19 2 11.5 2zm1 14.5h-2v-2h2v2zm0-3.5h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z"/></svg><div class="mud-nav-link-text">About</div></a></div>
<div class="mud-nav-item"><a href="releases" rel="" tabindex="0" class="mud-nav-link mud-ripple"><svg class="mud-icon-root mud-icon-default mud-svg-icon mud-icon-size-medium mud-nav-link-icon mud-nav-link-icon-default" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="m23 12-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12zm-10 5h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg><div class="mud-nav-link-text">Releases</div></a></div></nav></div></aside>
<div class="mud-main-content">
<div class="mud-container mud-container-maxwidth-lg mud-container--gutters mt-5 px-4"><div class="mud-grid mud-grid-spacing-xs-3 justify-center mt-5"><div class="mud-grid-item mud-grid-item-xs-12 mud-grid-item-sm-12 mud-grid-item-md-12 mud-grid-item-lg-12 mud-grid-item-xl-12 d-flex justify-center"><img loading="lazy" src="cropperblazor.png" class="mud-image fluid object-fill object-center" width="256" height="256" /></div>
<div class="mud-grid-item mud-grid-item-xs-12 mud-grid-item-sm-12 mud-grid-item-md-12 mud-grid-item-lg-12 mud-grid-item-xl-12 d-flex justify-center"><h1 class="mud-typography mud-typography-h1 mud-typography-align-center pa-0 ma-0 text-gradient index-title" style="word-break: break-all;">Cropper.Blazor</h1></div>
<div class="mud-grid-item mud-grid-item-xs-12 mud-grid-item-sm-12 mud-grid-item-md-12 mud-grid-item-lg-12 mud-grid-item-xl-12"><hr class="mud-divider mud-divider-fullwidth my-1 divider" /></div>
<div class="mud-grid-item mud-grid-item-xs-12 mud-grid-item-sm-12 mud-grid-item-md-12 mud-grid-item-lg-12 mud-grid-item-xl-12 d-flex justify-center"><p class="mud-typography mud-typography-body1 mud-typography-align-center pa-0 ma-0"><span style="color: var(--mud-palette-primary)"><b>Cropper.Blazor</b></span>
is a component that wraps around
<a target="_blank" rel="noopener" href="https://github.com/fengyuanchen/cropperjs"><span style="color: var(--mud-palette-secondary)"><b>Cropper.js</b></span></a>
version 1.6.2
</p></div>
<div class="mud-grid-item mud-grid-item-xs-12 mud-grid-item-sm-12 mud-grid-item-md-12 mud-grid-item-lg-12 mud-grid-item-xl-12 d-flex justify-center gap-4 pb-8"><a DisableElevation="true" type="button" href="/demo" class="mud-button-root mud-button mud-button-filled mud-button-filled-primary mud-button-filled-size-large mud-ripple button-gradient"><span class="mud-button-label"><p class="mud-typography mud-typography-body1 mud-typography-align-center">View Demo</p></span></a>
<a type="button" href="https://github.com/CropperBlazor/Cropper.Blazor" target="_blank" rel="noopener" class="mud-button-root mud-button mud-button-outlined mud-button-outlined-default mud-button-outlined-size-large mud-ripple ms-4"><span class="mud-button-label"><span class="mud-button-icon-start mud-button-icon-size-large"><svg class="mud-icon-root mud-svg-icon mud-icon-size-large" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.2.9.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1 .9 2.2v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3"/></svg></span><p class="mud-typography mud-typography-body1 mud-typography-align-center">Star on GitHub</p></span></a></div>
<p align="center"><a style="text-decoration:none" rel="noopener" href="https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/ci.yml" target="_blank"><img loading="lazy" src="https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/ci.yml/badge.svg?event=push" alt="Build and run test"></a>
<a style="text-decoration:none" rel="noopener" href="https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/cd.yml" target="_blank"><img loading="lazy" src="https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/cd.yml/badge.svg?event=push" alt="Deploy to GitHub Pages"></a>
<a style="text-decoration:none" rel="noopener" href="https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/release.yml" target="_blank"><img loading="lazy" src="https://github.com/CropperBlazor/Cropper.Blazor/actions/workflows/release.yml/badge.svg?event=push" alt="Deploy to NuGet"></a>
<a style="text-decoration:none" rel="noopener" href="https://codecov.io/github/CropperBlazor/Cropper.Blazor" target="_blank"><img loading="lazy" src="https://codecov.io/github/CropperBlazor/Cropper.Blazor/branch/dev/graph/badge.svg?token=39M66DO85T" alt="Code coverage"></a>
<a style="text-decoration:none" rel="noopener" href="https://github.com/CropperBlazor/Cropper.Blazor/blob/dev/LICENSE" target="_blank"><img loading="lazy" src="https://img.shields.io/github/license/CropperBlazor/Cropper.Blazor?color=ff5c9b" alt="License"></a>
<a style="text-decoration:none" rel="noopener" href="https://github.com/CropperBlazor/Cropper.Blazor" target="_blank"><img loading="lazy" src="https://img.shields.io/github/last-commit/CropperBlazor/Cropper.Blazor?color=009DEA" alt="Last commit"></a>
<a style="text-decoration:none" rel="noopener" href="https://www.nuget.org/packages/Cropper.Blazor" target="_blank"><img loading="lazy" src="https://img.shields.io/nuget/dt/Cropper.Blazor?logo=nuget&label=nuget%20downloads&color=ff5c9b" alt="Nuget version and downloads"></a></p></div>
<div class="mud-grid mud-grid-spacing-xs-3 justify-center mt-2"><div class="mud-grid-item mud-grid-item-xs-12 mud-grid-item-sm-12 mud-grid-item-md-12 mud-grid-item-lg-12 mud-grid-item-xl-12"><div class="docs-page-section"><div id="7f042840-a6d8-4ff6-b883-eff6c1b5fc8c" class="docs-section-header"><h5 class="mud-typography mud-typography-h5"><b>Description</b></h5><p class="mud-typography mud-typography-body1 mb-5"><span style="color: var(--mud-palette-primary)"><b>Cropper.Blazor</b></span> — most powerful image cropping tool for Blazor WebAssembly / Server, Hybrid with MAUI, MVC and other frameworks.
Cropper.Blazor is an essential component for building interactive image cropping and manipulation features in Blazor web applications. This versatile Blazor library empowers developers to integrate intuitive image cropping functionality directly into their Blazor projects, offering users a seamless and responsive image editing experience.
</p></div>
<div class="docs-page-section"><div id="500ba03a-a7b5-486a-b50b-2d74db4ffc5f" class="docs-section-header"><h6 class="mud-typography mud-typography-h6"><b>Key features and aspects of the Cropper.Blazor package include</b></h6><p class="mud-typography mud-typography-body1 mb-5"><div class="mud-list mud-list-padding"><div tabindex="0" class="mud-list-item mud-list-item-gutters mud-list-item-clickable mud-ripple" __internal_stopPropagation_onclick><div class="mud-list-item-icon"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/></svg></div><div class="mud-list-item-text "><p class="mud-typography mud-typography-body1">Blazor Integration: Cropper.Blazor is specifically designed for Blazor applications, allowing developers to effortlessly incorporate image cropping capabilities into their Blazor components and pages.</p></div></div>
<div tabindex="0" class="mud-list-item mud-list-item-gutters mud-list-item-clickable mud-ripple" __internal_stopPropagation_onclick><div class="mud-list-item-icon"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/></svg></div><div class="mud-list-item-text "><p class="mud-typography mud-typography-body1">Drag-and-Resize Interaction: Users can easily drag and resize the cropping area to precisely select the desired portion of an image. This intuitive interaction method ensures accurate and efficient cropping.</p></div></div>
<div tabindex="0" class="mud-list-item mud-list-item-gutters mud-list-item-clickable mud-ripple" __internal_stopPropagation_onclick><div class="mud-list-item-icon"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/></svg></div><div class="mud-list-item-text "><p class="mud-typography mud-typography-body1">Rotation Support: Cropper.Blazor includes the ability to rotate the selected image area, giving users full control over the orientation of their cropped content.</p></div></div>
<div tabindex="0" class="mud-list-item mud-list-item-gutters mud-list-item-clickable mud-ripple" __internal_stopPropagation_onclick><div class="mud-list-item-icon"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/></svg></div><div class="mud-list-item-text "><p class="mud-typography mud-typography-body1">Aspect Ratio Control: Developers can define custom aspect ratios for cropping, ensuring that the resulting image maintains specific proportions. This is particularly valuable for applications that require standardized image dimensions.</p></div></div>
<div tabindex="0" class="mud-list-item mud-list-item-gutters mud-list-item-clickable mud-ripple" __internal_stopPropagation_onclick><div class="mud-list-item-icon"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/></svg></div><div class="mud-list-item-text "><p class="mud-typography mud-typography-body1">Zoom Functionality: Cropper.Blazor allows users to zoom in and out of the image to fine-tune their cropping selection, guaranteeing precise results.</p></div></div>
<div tabindex="0" class="mud-list-item mud-list-item-gutters mud-list-item-clickable mud-ripple" __internal_stopPropagation_onclick><div class="mud-list-item-icon"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/></svg></div><div class="mud-list-item-text "><p class="mud-typography mud-typography-body1">Data Retrieval: The library provides methods to retrieve detailed information about the cropped area, such as coordinates and dimensions. This data can be easily captured and utilized for further processing or image uploads.</p></div></div>
<div tabindex="0" class="mud-list-item mud-list-item-gutters mud-list-item-clickable mud-ripple" __internal_stopPropagation_onclick><div class="mud-list-item-icon"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/></svg></div><div class="mud-list-item-text "><p class="mud-typography mud-typography-body1">Customization: Cropper.Blazor offers a wide range of configuration options, enabling developers to tailor the cropping experience to match the visual style and user interface of their Blazor applications.</p></div></div>
<div tabindex="0" class="mud-list-item mud-list-item-gutters mud-list-item-clickable mud-ripple" __internal_stopPropagation_onclick><div class="mud-list-item-icon"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/></svg></div><div class="mud-list-item-text "><p class="mud-typography mud-typography-body1">Cross-Browser Compatibility: The package is compatible with various modern web browsers, ensuring consistent functionality and user experience across different platforms.</p></div></div>
<div tabindex="0" class="mud-list-item mud-list-item-gutters mud-list-item-clickable mud-ripple" __internal_stopPropagation_onclick><div class="mud-list-item-icon"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/></svg></div><div class="mud-list-item-text "><p class="mud-typography mud-typography-body1">Documentation: Cropper.Blazor is accompanied by comprehensive documentation and practical examples, simplifying the integration process and helping developers make the most of its features.</p></div></div>
<div tabindex="0" class="mud-list-item mud-list-item-gutters mud-list-item-clickable mud-ripple" __internal_stopPropagation_onclick><div class="mud-list-item-icon"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/></svg></div><div class="mud-list-item-text "><p class="mud-typography mud-typography-body1">Open Source: Cropper.Blazor is open-source software, available for free use in both personal and commercial Blazor projects.</p></div></div>
<div tabindex="0" class="mud-list-item mud-list-item-gutters mud-list-item-clickable mud-ripple" __internal_stopPropagation_onclick><div class="mud-list-item-text "><p class="mud-typography mud-typography-body1">Cropper.Blazor streamlines the implementation of image cropping and editing within Blazor applications, enhancing user engagement and enabling dynamic image manipulation. Whether you are developing a Blazor-based image editor, profile picture uploader, or any other application that requires image cropping, Cropper.Blazor is a valuable package that simplifies the development process and enriches your application's capabilities.</p></div></div></div></p></div></div>
<div class="docs-page-section"><div id="dff67bc9-c0a6-4487-8857-7df6321a40e8" class="docs-section-header mt-1"><h6 id="manualInstall" class="mud-typography mud-typography-h6"><b>Manual Install</b></h6><p class="mud-typography mud-typography-body1 mb-5">If you already have a project and want to add Cropper.Blazor to it, either from a default template or a working application.</p></div></div>
<div class="docs-page-section"><div id="147b2b30-da3d-4c40-855c-5eb4a3ad836f" class="docs-section-header"><h6 id="installPackage" class="mud-typography mud-typography-h6"><b>Install the package</b></h6><p class="mud-typography mud-typography-body1 mb-5">Find the package through NuGet Package Manager or install it with following command:</p></div>
<div class="docs-section-source show-code"><div class="docs-section-source-container"><div class="mud-codeblock">
<div class="html"><pre>
dotnet add package Cropper.Blazor
</pre></div>
</div>
</div>
<button type="button" class="mud-button-root mud-icon-button mud-secondary-text hover:mud-secondary-hover mud-ripple mud-ripple-icon copy-code-button" __internal_stopPropagation_onclick><span class="mud-icon-button-label"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z"/></svg></span></button></div></div>
<div class="docs-page-section"><div id="b83e129c-1c20-446c-a6f8-6b6d26da76da" class="docs-section-header"><h6 class="mud-typography mud-typography-h6"><b>Add Imports</b></h6><p class="mud-typography mud-typography-body1 mb-5">After the package is added, you need to add the following in your <code style="" class="docs-code docs-code-primary ">_Imports.razor</code></p></div>
<div class="docs-section-source show-code"><div class="docs-section-source-container"><div class="mud-codeblock">
<div class="html"><pre>
<span class="at-sign">@</span>using Cropper.Blazor.Components
</pre></div>
</div>
</div>
<button type="button" class="mud-button-root mud-icon-button mud-secondary-text hover:mud-secondary-hover mud-ripple mud-ripple-icon copy-code-button" __internal_stopPropagation_onclick><span class="mud-icon-button-label"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z"/></svg></span></button></div></div>
<div class="docs-page-section"><div id="d9006fdf-5034-4ec1-bca0-d104c91a26bc" class="docs-section-header"><h6 class="mud-typography mud-typography-h6"><b>Add font and style references</b></h6><p class="mud-typography mud-typography-body1 mb-5">Add the following to your HTML head section, it's either <code style="" class="docs-code docs-code-primary ">index.html</code> or <code style="" class="docs-code docs-code-primary ">_Layout.cshtml</code>/<code style="" class="docs-code docs-code-primary ">_Host.cshtml</code> depending on whether you're running WebAssembly/MAUI or Server.</p></div>
<div class="docs-section-source show-code"><div class="docs-section-source-container"><div class="mud-codeblock">
<div class="html"><pre>
<span class="html-tag-delimiter"><</span><span class="html-element-name">link</span> <span class="html-attribute-name">href</span><span class="html-operator">=</span><span class="quot">"</span><span class="html-attribute-value">_content/Cropper.Blazor/cropper.min.css</span><span class="quot">"</span> <span class="html-attribute-name">rel</span><span class="html-operator">=</span><span class="quot">"</span><span class="html-attribute-value">stylesheet</span><span class="quot">"</span> <span class="html-tag-delimiter">/></span>
</pre></div>
</div>
</div>
<button type="button" class="mud-button-root mud-icon-button mud-secondary-text hover:mud-secondary-hover mud-ripple mud-ripple-icon copy-code-button" __internal_stopPropagation_onclick><span class="mud-icon-button-label"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z"/></svg></span></button></div></div>
<div class="docs-page-section"><div id="87fe4c34-0779-4f90-95ee-f5ea049c3e72" class="docs-section-header"><h6 class="mud-typography mud-typography-h6"><b>Add script reference</b></h6><p class="mud-typography mud-typography-body1 mb-5">In the same file but located in the end of it add the Cropper.Blazor js file, it should be in the same location as the default blazor script.</p></div>
<div class="docs-section-source show-code"><div class="docs-section-source-container"><div class="mud-codeblock">
<div class="html">
<pre>
<span class="html-tag-delimiter"><</span><span class="html-element-name">script</span> <span class="html-attribute-name">src</span><span class="html-operator">=</span><span class="quot">"</span><span class="html-attribute-value">_content/Cropper.Blazor/cropper.min.js</span><span class="quot">"</span><span class="html-tag-delimiter">></span><span class="html-tag-delimiter"><</span><span class="html-element-name">/script</span><span class="html-tag-delimiter">></span>
</pre>
</div>
</div>
</div>
<button type="button" class="mud-button-root mud-icon-button mud-secondary-text hover:mud-secondary-hover mud-ripple mud-ripple-icon copy-code-button" __internal_stopPropagation_onclick><span class="mud-icon-button-label"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z"/></svg></span></button></div></div>
<div class="docs-page-section"><div id="e88b6bf8-dbcb-4649-a8c9-6202ac2d8652" class="docs-section-header"><h6 class="mud-typography mud-typography-h6"><b>Register Services</b></h6><p class="mud-typography mud-typography-body1 mb-5">
Add the following in <code style="" class="docs-code docs-code-primary ">Program.cs</code>
<br><br>
You can change the path to the <code style="" class="docs-code docs-code-primary ">cropperJSInterop.min.js</code> module if for some reason
it is located outside the server root folder using the examples below to override the internal or full global <code style="" class="docs-code docs-code-primary ">cropperJSInterop.min.js</code> module path.
Actions are usually required when an application is deployed to an <code style="" class="docs-code docs-code-primary docs-code-tertiary">IIS Web Server</code>.
</p></div>
<div class="docs-section-content show-code"><div role="toolbar" class="mud-toolbar mud-toolbar-gutters docs-section-content-toolbar darken"><button type="button" class="mud-button-root mud-button mud-button-text mud-button-text-default mud-button-text-size-small mud-ripple file-button active" style="word-break: break-word;" __internal_stopPropagation_onclick><span class="mud-button-label">Add Service</span></button><button type="button" class="mud-button-root mud-button mud-button-text mud-button-text-default mud-button-text-size-small mud-ripple file-button" style="word-break: break-word;" __internal_stopPropagation_onclick><span class="mud-button-label">Override internal path</span></button><button type="button" class="mud-button-root mud-button mud-button-text mud-button-text-default mud-button-text-size-small mud-ripple file-button" style="word-break: break-word;" __internal_stopPropagation_onclick><span class="mud-button-label">Override full global path</span></button><div aria-hidden="true" class="flex-grow-1"></div></div></div><div class="docs-section-source show-code"><div class="docs-section-source-container"><div class="mud-codeblock">
<div class="csharp">
<pre>
<span class="keyword">using</span> Cropper.Blazor.Extensions;
<span class="local-var">builder</span>.Services.<span class="function">AddCropper</span>();
</pre>
</div>
</div>
</div>
<button type="button" class="mud-button-root mud-icon-button mud-secondary-text hover:mud-secondary-hover mud-ripple mud-ripple-icon copy-code-button" __internal_stopPropagation_onclick><span class="mud-icon-button-label"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z"/></svg></span></button></div></div>
<div class="docs-page-section"><div id="14136b4e-403d-40f2-a03b-2036f62847a7" class="docs-section-header mt-3"><p class="mud-typography mud-typography-body1 mb-5">Also for server-side (Blazor Server or MVC with Blazor Server) you need add configuration SignalR, increase <code style="" class="docs-code docs-code-primary ">MaximumReceiveMessageSize</code> of a single incoming hub message (default is 32KB) and map SignalR to your path. However, if your images are too large, the <code style="" class="docs-code docs-code-primary ">MaximumReceiveMessageSize</code> variable should be increased to the desired value.</p></div>
<div class="docs-section-source show-code"><div class="docs-section-source-container"><div class="mud-codeblock">
<div class="csharp">
<pre>
<span class="keyword">using</span> Cropper.Blazor.Extensions;
<span class="local-var">builder</span>.Services.<span class="function">AddServerSideBlazor</span>()
.<span class="function">AddHubOptions</span>(<span class="local-var">options</span> =>
{
<span class="local-var">options</span>.MaximumReceiveMessageSize = <span class="number">32</span> * <span class="number">1024</span> * <span class="number">100</span>;
});
<span class="local-var">app</span>.<span class="function">MapBlazorHub</span>();
</pre>
</div>
</div>
</div>
<button type="button" class="mud-button-root mud-icon-button mud-secondary-text hover:mud-secondary-hover mud-ripple mud-ripple-icon copy-code-button" __internal_stopPropagation_onclick><span class="mud-icon-button-label"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z"/></svg></span></button></div></div>
<div class="docs-page-section"><div id="dd7655d2-8301-4749-909e-2ef17ec4c399" class="docs-section-header"><h6 class="mud-typography mud-typography-h6"><b>Resolve MAUI project dependency conflicts</b></h6><p class="mud-typography mud-typography-body1 mb-5">
Run following command and rebuilt the project. If that doesn't help, try the step below about override package versions.
</p></div>
<div class="docs-section-source show-code"><div class="docs-section-source-container"><div class="mud-codeblock">
<div class="html"><pre>
dotnet workload update
</pre></div>
</div>
</div>
<button type="button" class="mud-button-root mud-icon-button mud-secondary-text hover:mud-secondary-hover mud-ripple mud-ripple-icon copy-code-button" __internal_stopPropagation_onclick><span class="mud-icon-button-label"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z"/></svg></span></button></div></div>
<div class="docs-page-section"><div id="ca186eed-2ce1-4976-b77e-eaba67cc6b0b" class="docs-section-header"><h6 class="mud-typography mud-typography-h6"><b>Overriding package versions</b></h6><p class="mud-typography mud-typography-body1 mb-5">
When resolving MAUI project dependency conflicts, you can override an individual package version by using the <code style="" class="docs-code docs-code-primary ">VersionOverride</code> property on a <code style="" class="docs-code docs-code-primary "><PackageReference /></code> item.
</p></div>
<div class="docs-section-source show-code"><div class="docs-section-source-container"><div class="mud-codeblock">
<div class="html"><pre>
<span class="html-tag-delimiter"><</span><span class="html-element-name">PackageReference</span> <span class="html-attribute-name">Include</span><span class="html-operator">=</span><span class="quot">"</span><span class="html-attribute-value">Package name</span><span class="quot">"</span> <span class="html-attribute-name">VersionOverride</span><span class="html-operator">=</span><span class="quot">"</span><span class="html-attribute-value">New version package</span><span class="quot">"</span> <span class="html-tag-delimiter">/></span>
</pre></div>
</div>
</div>
<button type="button" class="mud-button-root mud-icon-button mud-secondary-text hover:mud-secondary-hover mud-ripple mud-ripple-icon copy-code-button" __internal_stopPropagation_onclick><span class="mud-icon-button-label"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z"/></svg></span></button></div></div>
<div class="docs-page-section"><div id="fa68c62f-4f8e-4333-8e7d-81bc0ae49f9e" class="docs-section-header"><h6 class="mud-typography mud-typography-h6"><b>Add Components</b></h6><p class="mud-typography mud-typography-body1 mb-5">Add the following components to your <code style="" class="docs-code docs-code-primary ">MainLayout.razor</code></p></div>
<div class="docs-section-content outlined show-code"><div role="toolbar" class="mud-toolbar mud-toolbar-gutters docs-section-content-toolbar outlined"><div aria-hidden="true" class="flex-grow-1"></div><button type="button" class="mud-button-root mud-button mud-button-text mud-button-text-default mud-button-text-size-small mud-ripple" __internal_stopPropagation_onclick><span class="mud-button-label"><span class="mud-button-icon-start mud-button-icon-size-small"><svg class="mud-icon-root mud-svg-icon mud-icon-size-small" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><rect fill="none" height="24" width="24"/><path d="M19.17,12l-3.88-3.88c-0.39-0.39-0.39-1.02,0-1.41l0,0c0.39-0.39,1.02-0.39,1.41,0l4.59,4.59c0.39,0.39,0.39,1.02,0,1.41 l-2.88,2.88L17,14.17L19.17,12z M2.1,4.93l3.49,3.49l-2.88,2.88c-0.39,0.39-0.39,1.02,0,1.41l4.59,4.59c0.39,0.39,1.02,0.39,1.41,0 l0,0c0.39-0.39,0.39-1.02,0-1.41L4.83,12L7,9.83L19.07,21.9c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L3.51,3.51 c-0.39-0.39-1.02-0.39-1.41,0l0,0C1.71,3.91,1.71,4.54,2.1,4.93z"/></svg></span>Hide code</span></button></div><div class="docs-section-content-inner relative d-flex flex-grow-1 flex-wrap justify-center align-center px-8 pb-8 pt-2"><div class="img-container"><img class="cropper-example" src="cropperblazor.png" />
<style>
.cropper-example {
max-height: 300px;
width: 100%;
}
</style></div></div></div><div class="docs-section-source outlined show-code"><div class="docs-section-source-container"><div class="mud-codeblock">
<div class="html"><pre>
<span class="at-sign">@</span>using Cropper.Blazor.Components
<span class="html-tag-delimiter"><</span><span class="html-element-name">CropperComponent</span> <span class="html-attribute-name">Class</span><span class="html-operator">=</span><span class="quot">"</span><span class="html-attribute-value">cropper-example</span><span class="quot">"</span> <span class="html-attribute-name">Src</span><span class="html-operator">=</span><span class="quot">"</span><span class="html-attribute-value">cropperblazor.png</span><span class="quot">"</span> <span class="html-attribute-name">Options</span><span class="html-operator">=</span><span class="quot">"</span><span class="html-attribute-value">new Cropper.Blazor.Models.Options()</span><span class="quot">"</span> <span class="html-tag-delimiter">/></span>
<span class="html-tag-delimiter"><</span><span class="html-element-name">style</span><span class="html-tag-delimiter">></span>
.cropper-example {
max-height: 300px;
width: 100%;
}
<span class="html-tag-delimiter"></</span><span class="html-element-name">style</span><span class="html-tag-delimiter">></span>
</pre></div>
</div>
</div>
<button type="button" class="mud-button-root mud-icon-button mud-secondary-text hover:mud-secondary-hover mud-ripple mud-ripple-icon copy-code-button" __internal_stopPropagation_onclick><span class="mud-icon-button-label"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z"/></svg></span></button></div></div></div></div></div></div>
<div class="mud-container mud-container-maxwidth-lg mud-container--gutters"><div class="section-container mud-text-secondary pb-8 mt-16"><div class="mud-grid mud-grid-spacing-xs-3 justify-start docs-footer"><div class="mud-grid-item mud-grid-item-xs-6 mud-grid-item-sm-3"><div class="d-flex flex-column"><div class="d-flex flex-wrap align-center mb-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 650" class="mr-2" style="width:24px;"><g><linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="84.1612" y1="565.8389" x2="411.8388" y2="238.1612"><stop offset="0" style="stop-color:#E73C7E"></stop>
<stop offset="0.15" style="stop-color:#E73C7E"></stop>
<stop offset="0.5" style="stop-color:#746CB4"></stop>
<stop offset="0.85" style="stop-color:#009DEA"></stop>
<stop offset="1" style="stop-color:#009DEA"></stop></linearGradient>
<path fill="url(#gradient)" d="M628,459.5H192.5c-1.1,0-2-0.9-2-2V22c0-6.9-5.6-12.5-12.5-12.5H93c-6.9,0-12.5,5.6-12.5,12.5v56.5
c0,1.1-0.9,2-2,2H22c-6.9,0-12.5,5.6-12.5,12.5v85c0,6.9,5.6,12.5,12.5,12.5h56.5c1.1,0,2,0.9,2,2V557c0,6.9,5.6,12.5,12.5,12.5
h364.5c1.1,0,2,0.9,2,2V628c0,6.9,5.6,12.5,12.5,12.5h85c6.9,0,12.5-5.6,12.5-12.5v-56.5c0-1.1,0.9-2,2-2H628
c6.9,0,12.5-5.6,12.5-12.5v-85C640.5,465.1,634.9,459.5,628,459.5z M80.5,163.5c0,1.1-0.9,2-2,2h-42c-1.1,0-2-0.9-2-2v-56
c0-1.1,0.9-2,2-2h42c1.1,0,2,0.9,2,2V163.5z M544.5,613.5c0,1.1-0.9,2-2,2h-56c-1.1,0-2-0.9-2-2v-42c0-1.1,0.9-2,2-2h56
c1.1,0,2,0.9,2,2V613.5z M615.5,542.5c0,1.1-0.9,2-2,2h-506c-1.1,0-2-0.9-2-2v-506c0-1.1,0.9-2,2-2h56c1.1,0,2,0.9,2,2V472
c0,6.9,5.6,12.5,12.5,12.5h435.5c1.1,0,2,0.9,2,2V542.5z M484.5,178v249c0,6.9-5.6,12.5-12.5,12.5s-12.5-5.6-12.5-12.5V192.5
c0-1.1-0.9-2-2-2H223c-6.9,0-12.5-5.6-12.5-12.5s5.6-12.5,12.5-12.5h249C478.9,165.5,484.5,171.1,484.5,178z M569.5,93v334
c0,6.9-5.6,12.5-12.5,12.5s-12.5-5.6-12.5-12.5V107.5c0-1.1-0.9-2-2-2H223c-6.9,0-12.5-5.6-12.5-12.5s5.6-12.5,12.5-12.5h334
C563.9,80.5,569.5,86.1,569.5,93z"></path>
<linearGradient id="anim-gradient" gradientUnits="userSpaceOnUse" x1="78.5111" y1="571.4889" x2="571.4889" y2="78.5111"><stop offset="0" style="stop-color:#009DEA"><animate attributeName="stop-color" values="#009DEA; #E73C7E; #009DEA" dur="3s" repeatCount="indefinite"></animate></stop>
<stop offset="1" style="stop-color:#E73C7E"><animate attributeName="stop-color" values="#E73C7E; #009DEA; #E73C7E" dur="3s" repeatCount="indefinite"></animate></stop></linearGradient>
<path fill="url(#anim-gradient)" d="M178,9.5c6.9,0,12.5,5.6,12.5,12.5v435.5c0,1.1,0.9,2,2,2H628c6.9,0,12.5,5.6,12.5,12.5v85
c0,6.9-5.6,12.5-12.5,12.5h-56.5c-1.1,0-2,0.9-2,2V628c0,6.9-5.6,12.5-12.5,12.5h-85c-6.9,0-12.5-5.6-12.5-12.5v-56.5
c0-1.1-0.9-2-2-2H93c-6.9,0-12.5-5.6-12.5-12.5V192.5c0-1.1-0.9-2-2-2H22c-6.9,0-12.5-5.6-12.5-12.5V93c0-6.9,5.6-12.5,12.5-12.5
h56.5c1.1,0,2-0.9,2-2V22c0-6.9,5.6-12.5,12.5-12.5H178 M107.5,544.5h506c1.1,0,2-0.9,2-2v-56c0-1.1-0.9-2-2-2H178
c-6.9,0-12.5-5.6-12.5-12.5V36.5c0-1.1-0.9-2-2-2h-56c-1.1,0-2,0.9-2,2v506C105.5,543.6,106.4,544.5,107.5,544.5 M36.5,165.5h42
c1.1,0,2-0.9,2-2v-56c0-1.1-0.9-2-2-2h-42c-1.1,0-2,0.9-2,2v56C34.5,164.6,35.4,165.5,36.5,165.5 M486.5,615.5h56c1.1,0,2-0.9,2-2
v-42c0-1.1-0.9-2-2-2h-56c-1.1,0-2,0.9-2,2v42C484.5,614.6,485.4,615.5,486.5,615.5 M557,80.5c6.9,0,12.5,5.6,12.5,12.5v334
c0,6.9-5.6,12.5-12.5,12.5s-12.5-5.6-12.5-12.5V107.5c0-1.1-0.9-2-2-2H223c-6.9,0-12.5-5.6-12.5-12.5s5.6-12.5,12.5-12.5H557
M472,165.5c6.9,0,12.5,5.6,12.5,12.5v249c0,6.9-5.6,12.5-12.5,12.5s-12.5-5.6-12.5-12.5V192.5c0-1.1-0.9-2-2-2H223
c-6.9,0-12.5-5.6-12.5-12.5s5.6-12.5,12.5-12.5H472 M178,1.5H93c-11.3,0-20.5,9.2-20.5,20.5v50.5H22C10.7,72.5,1.5,81.7,1.5,93v85
c0,11.3,9.2,20.5,20.5,20.5h50.5V557c0,11.3,9.2,20.5,20.5,20.5h358.5V628c0,11.3,9.2,20.5,20.5,20.5h85c11.3,0,20.5-9.2,20.5-20.5
v-50.5H628c11.3,0,20.5-9.2,20.5-20.5v-85c0-11.3-9.2-20.5-20.5-20.5H198.5V22C198.5,10.7,189.3,1.5,178,1.5L178,1.5z M113.5,42.5
h44V472c0,11.3,9.2,20.5,20.5,20.5h429.5v44h-494V42.5L113.5,42.5z M42.5,113.5h30v44h-30V113.5L42.5,113.5z M492.5,577.5h44v30
h-44V577.5L492.5,577.5z M557,72.5H223c-11.3,0-20.5,9.2-20.5,20.5s9.2,20.5,20.5,20.5h313.5V427c0,11.3,9.2,20.5,20.5,20.5
s20.5-9.2,20.5-20.5V93C577.5,81.7,568.3,72.5,557,72.5L557,72.5z M472,157.5H223c-11.3,0-20.5,9.2-20.5,20.5s9.2,20.5,20.5,20.5
h228.5V427c0,11.3,9.2,20.5,20.5,20.5s20.5-9.2,20.5-20.5V178C492.5,166.7,483.3,157.5,472,157.5L472,157.5z"></path></g></svg>
<a href="/" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-subtitle2">Cropper.Blazor</a></div>
<div class="d-flex align-center my-2"><svg class="mud-icon-root mud-svg-icon mud-icon-size-small mr-2" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.75 3.94L4.07 10.08c-.83.35-.81 1.53.02 1.85L9.43 14c.26.1.47.31.57.57l2.06 5.33c.32.84 1.51.86 1.86.03l6.15-14.67c.33-.83-.5-1.66-1.32-1.32z"/></svg>
<p class="mud-typography mud-typography-body1">Ukraine</p></div></div>
<div class="d-flex my-2"><a aria-label="github" type="button" href="https://github.com/CropperBlazor/Cropper.Blazor" target="_blank" rel="noopener" class="mud-button-root mud-icon-button mud-inherit-text hover:mud-inherit-hover mud-ripple mud-ripple-icon mud-icon-button-edge-start me-2"><span class="mud-icon-button-label"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.2.9.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1 .9 2.2v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3"/></svg></span></a></div></div>
<div class="mud-grid-item mud-grid-item-xs-6 mud-grid-item-sm-3 d-flex flex-column"><a href="/" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-subtitle2 mb-3">Getting Started</a>
<a href="/demo" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-body1">Demo</a>
<a href="/about" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-body1">About</a>
<a href="/releases" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-body1">Releases</a></div>
<div class="mud-grid-item mud-grid-item-xs-12 mud-grid-item-sm-3 d-flex flex-column"><a href="/examples/cropperusage" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-subtitle2 mb-3">All Examples</a>
<a href="/examples/cropperusage" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-body1">Basic Usage</a>
<a href="/examples/cropping" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-body1">Cropping</a>
<a href="/examples/dimensions" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-body1">Crop Box Dimensions</a>
<a href="/examples/viewmodes" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-body1">View Modes</a></div>
<div class="mud-grid-item mud-grid-item-xs-12 mud-grid-item-sm-3 d-flex flex-column"><a href="/api" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-subtitle2 mb-3">API</a>
<a href="/api" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-body1">CropperComponent</a>
<a href="/api/Options" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-body1">Options</a>
<a href="/api/GetCroppedCanvasOptions" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-body1">GetCroppedCanvasOptions</a>
<a href="/api/SetCropBoxDataOptions" class="mud-typography mud-link mud-inherit-text mud-link-underline-none mud-typography-body1">SetCropBoxDataOptions</a></div>
<div class="mud-grid-item mud-grid-item-xs-12"><div role="toolbar" class="mud-toolbar mud-toolbar-dense"><p class="mud-typography mud-typography-body1">Copyright © 2022-2024 <span class="text-gradient">Cropper.Blazor</span></p></div></div></div></div></div>
<span class="mud-scroll-to-top hidden" style="z-index:2000;"><button type="button" class="mud-button-root mud-fab mud-fab-primary mud-fab-size-large mud-ripple" __internal_stopPropagation_onclick><span class="mud-fab-label"><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="img"><path d="M0 0h24v24H0z" fill="none"/><path d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg></span></button></span></div></div>
</div>
<!-- %%-PRERENDERING-END-%% -->
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="decode.min.js"></script>
<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
Blazor.start({
loadBootResource: function (type, name, defaultUri, integrity) {
// For framework resources, use the precompressed .br files for faster downloads
// This is needed only because GitHub pages doesn't natively support Brotli (or even gzip for .dll files)
if (type !== 'dotnetjs' && location.hostname !== 'localhost') {
return (async function () {
const response = await fetch(defaultUri + '.br', { cache: 'no-cache' });
if (!response.ok) {
throw new Error(response.statusText);
}
const originalResponseBuffer = await response.arrayBuffer();
const originalResponseArray = new Int8Array(originalResponseBuffer);
const decompressedResponseArray = BrotliDecode(originalResponseArray);
const contentType = type === 'dotnetwasm' ? 'application/wasm' : 'application/octet-stream';
return new Response(decompressedResponseArray, { headers: { 'content-type': contentType } });
})();
}
}
});
</script>
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
<script src="_content/Cropper.Blazor/cropper.min.js"></script>
<script src="overrideCropperJsInteropModule.min.js"></script>
<script src="jsObjectModule.min.js"></script>
<script src="helper.min.js"></script>
<script src="sw-registrator.min.js"></script>
</body></html>