Skip to content

Commit 3e5cf53

Browse files
alyleuialyleui
authored
WIP feat(img-cropper): improve (#63)
* add scale & position to ImgCropperEvent * feat(img-cropper): add autoCrop * fix(img-cropper): add `dataURL` BREAKING CHANGES: Rename `base64` to `dataURL` & `originalBase64` to `originalDataURL` in `ImgCropperEvent` before: ```ts onCropped(e: ImgCropperEvent) { this.croppedImage = e.base64; } ``` after: ```ts onCropped(e: ImgCropperEvent) { this.croppedImage = e.dataUrl; } ``` * order autoCrop * docs: update docs * docs: fix docs * remove unused variables * update q * fix autoCrop * fix autoCrop * add scale Input * add range example * add range input example * clean * remove deprecated * fix autocrop * add rotate method * fix center method * clean * clean * update position on rotate * remove log * fix * rm logs * ­ * ­ * update docs * remove unused styles & fix negative rotation * add rotation to `ImgCropperEvent`
1 parent ed129c5 commit 3e5cf53

File tree

8 files changed

+473
-113
lines changed

8 files changed

+473
-113
lines changed

‎src/app/docs/components/resizing-cropping-images-demo/resizing-cropping-images-demo.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<p>
2-
Resize and crop images with Canvas
2+
Resize, rotate and crop images with Canvas.
33
</p>
44
<demo-view path="docs/components/resizing-cropping-images-demo/resizing-cropping-images-example-01" viewLabel="Basic">
55
<resizing-cropping-images-example-01></resizing-cropping-images-example-01>

‎src/app/docs/components/resizing-cropping-images-demo/resizing-cropping-images-example-01/resizing-cropping-images-example-01.component.html

+6
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,20 @@
1515
<button (click)="cropping.fit()" ly-button>fit</button>
1616
<button (click)="cropping.fitToScreen()" ly-button>fit to screen</button>
1717
<button (click)="cropping.setScale(1)" ly-button>1:1</button>
18+
<button (click)="cropping.rotate(90)" ly-button>rotate 90deg</button>
19+
<button (click)="cropping.rotate(180)" ly-button>rotate 180deg</button>
1820
</div>
1921
<ly-cropping [withClass]="classes.cropping" #cropping
2022
[config]="myConfig"
23+
[(scale)]="scale"
2124
(cropped)="onCropped($event)"
2225
(loaded)="onloaded($event)"
2326
(error)="onerror($event)">
2427
<span>Drag and drop image</span>
2528
</ly-cropping>
29+
<div *ngIf="cropping.isLoaded" [className]="classes.range">
30+
<input type="range" [className]="classes.rangeInput" [attr.min]="cropping.minScale" max="1" [(ngModel)]="scale" step="any">
31+
</div>
2632
<button *ngIf="cropping.isLoaded" color="accent" (click)="cropping.crop()" ly-button>
2733
<ly-icon>crop</ly-icon>crop
2834
</button>

‎src/app/docs/components/resizing-cropping-images-demo/resizing-cropping-images-example-01/resizing-cropping-images-example-01.component.ts

+103-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Component, ChangeDetectionStrategy } from '@angular/core';
22

33
import { ImgCropperConfig, ImgCropperEvent } from '@alyle/ui/resizing-cropping-images';
4-
import { LyTheme2 } from '@alyle/ui';
4+
import { LyTheme2, ThemeVariables } from '@alyle/ui';
55

6-
const styles = {
6+
const styles = (theme: ThemeVariables) => ({
77
actions: {
88
display: 'flex'
99
},
@@ -13,8 +13,105 @@ const styles = {
1313
},
1414
flex: {
1515
flex: 1
16+
},
17+
range: {
18+
textAlign: 'center',
19+
maxWidth: '400px'
20+
},
21+
rangeInput: {
22+
maxWidth: '150px',
23+
margin: '1em 0',
24+
25+
// http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
26+
// removes default webkit styles
27+
'-webkit-appearance': 'none',
28+
29+
// fix for FF unable to apply focus style bug
30+
border: `solid 6px ${theme.background.tertiary}`,
31+
32+
// required for proper track sizing in FF
33+
width: '100%',
34+
'&::-webkit-slider-runnable-track': {
35+
width: '300px',
36+
height: '3px',
37+
background: '#ddd',
38+
border: 'none',
39+
borderRadius: '3px'
40+
},
41+
'&::-webkit-slider-thumb': {
42+
'-webkit-appearance': 'none',
43+
border: 'none',
44+
height: '16px',
45+
width: '16px',
46+
borderRadius: '50%',
47+
background: theme.primary.default,
48+
marginTop: '-6px'
49+
},
50+
'&:focus': {
51+
outline: 'none'
52+
},
53+
'&:focus::-webkit-slider-runnable-track': {
54+
background: '#ccc'
55+
},
56+
57+
'&::-moz-range-track': {
58+
width: '300px',
59+
height: '3px',
60+
background: '#ddd',
61+
border: 'none',
62+
borderRadius: '3px'
63+
},
64+
'&::-moz-range-thumb': {
65+
border: 'none',
66+
height: '16px',
67+
width: '16px',
68+
borderRadius: '50%',
69+
background: theme.primary.default
70+
},
71+
72+
// hide the outline behind the border
73+
'&:-moz-focusring': {
74+
outline: '1px solid white',
75+
outlineOffset: '-1px',
76+
},
77+
78+
'&::-ms-track': {
79+
width: '300px',
80+
height: '3px',
81+
82+
// remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead
83+
background: 'transparent',
84+
85+
// leave room for the larger thumb to overflow with a transparent border
86+
borderColor: 'transparent',
87+
borderWidth: '6px 0',
88+
89+
// remove default tick marks
90+
color: 'transparent'
91+
},
92+
'&::-ms-fill-lower': {
93+
background: '#777',
94+
borderRadius: '10px'
95+
},
96+
'&::-ms-fill-': {
97+
background: '#ddd',
98+
borderRadius: '10px',
99+
},
100+
'&::-ms-thumb': {
101+
border: 'none',
102+
height: '16px',
103+
width: '16px',
104+
borderRadius: '50%',
105+
background: theme.primary.default,
106+
},
107+
'&:focus::-ms-fill-lower': {
108+
background: '#888'
109+
},
110+
'&:focus::-ms-fill-upper': {
111+
background: '#ccc'
112+
}
16113
}
17-
};
114+
});
18115

19116
@Component({
20117
selector: 'resizing-cropping-images-example-01',
@@ -26,7 +123,9 @@ export class ResizingCroppingImagesExample01Component {
26123
classes = this.theme.addStyleSheet(styles);
27124
croppedImage: string;
28125
result: string;
126+
scale: number;
29127
myConfig: ImgCropperConfig = {
128+
autoCrop: true,
30129
width: 150, // Default `250`
31130
height: 150, // Default `200`
32131
fill: '#ff2997' // Default transparent if type = png else #000
@@ -37,7 +136,7 @@ export class ResizingCroppingImagesExample01Component {
37136
) { }
38137

39138
onCropped(e: ImgCropperEvent) {
40-
this.croppedImage = e.base64;
139+
this.croppedImage = e.dataURL;
41140
console.log('cropped img: ', e);
42141
}
43142
onloaded(e: ImgCropperEvent) {

‎src/app/docs/components/resizing-cropping-images-demo/resizing-cropping-images-example-02/resizing-cropping-images-example-02.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export class ResizingCroppingImagesExample02Component {
3333
) { }
3434

3535
onCropped(e: ImgCropperEvent) {
36-
this.croppedImage = e.base64;
36+
this.croppedImage = e.dataURL;
3737
console.log('cropped img: ', e);
3838
}
3939

‎src/app/docs/components/resizing-cropping-images-demo/resizing-cropping-images-example-03/resizing-cropping-images-example-03.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<button (click)="cropping.center()" ly-button>center</button>
1313
<button (click)="cropping.fit()" ly-button>fit</button>
1414
<button (click)="cropping.fitToScreen()" ly-button>fit to screen</button>
15-
<button (click)="cropping['1:1']()" ly-button>1:1</button>
15+
<button (click)="cropping.setScale(1)" ly-button>1:1</button>
1616
<ly-cropping #cropping
1717
[withClass]="classes.cropping"
1818
[config]="myConfig"

‎src/app/docs/components/resizing-cropping-images-demo/resizing-cropping-images-example-03/resizing-cropping-images-example-03.component.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ export class ResizingCroppingImagesExample03Component {
3333
};
3434

3535
onCropped(e) {
36-
this.croppedImage = e.base64;
36+
this.croppedImage = e.dataURL;
37+
console.log(e);
38+
console.log(this.img);
3739
}
3840

3941
constructor(

‎src/lib/resizing-cropping-images/resizing-cropping-images.html

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<div #_imgContainer
22
[className]="classes.imgContainer"
33
(slidestart)="_moveStart($event)"
4-
(slide)="_move($event)">
5-
<img *ngIf="isLoaded" [src]="_originalImgBase64">
4+
(slide)="_move($event)"
5+
(slideend)="_slideEnd()">
6+
<canvas #_imgCanvas></canvas>
67
</div>
7-
<div #_croppingContainer *ngIf="isLoaded; else content" [className]="classes.croppingContainer" [ngStyle]="{
8+
<div #_croppingContainer *ngIf="_isLoadedImg; else content" [className]="classes.croppingContainer" [ngStyle]="{
89
width: config.width + 'px',
910
height: config.height + 'px'
1011
}"></div>

0 commit comments

Comments
 (0)